vue3数据存储之Pinia

• 安装"pinia": "^2.0.35"

npm install pinia ^2.0.35

• 在store文件夹中创建index.js

//引入pinia
import { createPinia } from "pinia"

const pinia = createPinia()

export default pinia

• 在store文件夹中创建main.js

//引入defineStore
import { defineStore } from 'pinia'
import { loadData, getInitInfo } from '../apis';    //初始化接口引入
// 第一个参数是应用程序中 store 的唯一 id
export const useMainStore = defineStore('main', {
  state: () => ({
    num: 10,
    loading: false,
    info: {}
  }),

  actions: {
    updateLoading(value) {
      this.loading = value;
    },
    increment() {
      this.num++
    },
    async setInitInfo() {
      let data = await getInitInfo();
      this.info = data;
    },
  },

  getters: {
    is_reg: (state) => state.info?.is_reg,            //是否报名
  }
})

• 使用到的vue文件中引入

//引入useMainStore
import { useMainStore } from '../store/main.js';
//使用
const mainStore = useMainStore();
mainStore.xxxx