定义store

//store/index.js

import { createPinia } from 'pinia'

const pinia = createPinia();
export default pinia;

//mian.js
import pinia from './store/index.js'
createApp(App).use(router).use(pinia).mount('#app')

定义多个store实例

//mainStore.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useMainStore = defineStore('mainData', () =>{
    const modelFlag = ref(false);
    const handleModel = () => modelFlag.value = !modelFlag.value;
    return {
        modelFlag,
        handleModel
    }
})

使用

//Main.vue
import { useMainStore } from "../store/mainStore";
import { storeToRefs } from "pinia";

const mainStore = useMainStore();
const { modelFlag } = storeToRefs(mainStore);
const { handleModel } = mainStore;

const handleMenuItemClick = (flag, address) => {
  flag ? handleModel() : open(address, "_blank");
};

//Header.vue
import { useMainStore } from "../store/mainStore";

const mainStore = useMainStore();
const { handleModel } = mainStore;

注意

1. useStore() 的调用必须放在 pinia 安装后才会执行的函数中，即不可在导出store实例的地方直接使用useStore然后再导出。
2. store 是一个用 reactive 包装的对象，所以在使用数据的时候也不需要使用.value,同时它也像props一样不可以直接进行解构，解构会丢失响应式，解决方案是使用计算属性接收或者使用storeToRefs() 包裹store实例再进行解构;

import { useMainStore } from "../store/mainStore";
import { storeToRefs } from "pinia";

const mainStore = useMainStore();
//方案一
const { modelFlag } = storeToRefs(mainStore);
//方案二
const modelFlag = computed(() => mainStore.modelFlag);

3. actions里面的方法可以直接进行解构