任意组件间通信-pinia存储获取数据

努力进阶的快快~

于 2024-01-11 17:21:15 发布

阅读量660

点赞数 11

CC 4.0 BY-SA版权

分类专栏： vue3 pinia 文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_69439101/article/details/135534841

vue3 同时被 2 个专栏收录

20 篇文章

订阅专栏

pinia

1 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Pinia库创建一个名为myStore的存储模块，包括定义状态、getter和action。展示了如何在需要时更新和获取存储的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建文件src/store/example.js

import { defineStore } from 'pinia';
// 创建 store
export const useMyStore = defineStore('myStore', {
  state: () => ({
    data: '',
  }),

  getters: {
    getData: state => state.data,
  },

  actions: {
    updateData(newData) {
      this.data = newData;
    },
  },
});

2.在需要存储数据的文件中

import { useMyStore } from '@/store/example.js';
const store = useMyStore();
  //在需要存储数据的地方 
store.updateData(123);

3.在需要获取所存储的数据的文件中

import { useMyStore } from '@/store/example.js';
const store = useMyStore();
const data = store.getData;
console.log(data) // 123