Pinia 全局状态管理

yarn add pinia

如果项目比较大，使用单一状态库，项目的状态库就会集中到一个大对象上，显得十分臃肿难以维护。所以Vuex就允许我们将其分割成模块（modules），每个模块都拥有自己state，mutations,actions…。
Pinia没有modules，如果想使用多个store，直接定义多个store传入不同的id即可，如：

import { defineStore } from "pinia";
export const storeA = defineStore("storeA", {...});
export const storeB = defineStore("storeB", {...});
export const storeC = defineStore("storeB", {...});

在 src/store 目录下新建 index.ts 文件与 modules 文件夹

└── src/
    ├── store/
        ├── modules/  
      ├── index.js

import type { App } from 'vue'
import { createPinia } from 'pinia'
const store = createPinia()
export default function setupStore(app: App<Element>) {
  app.use(store)
}

mian.ts挂载 store 配置 :

import { createApp } from 'vue'
import setupRoute from './router'
import setupStore from './store'
import App from './App.vue'
// ...
const app = createApp(App)
// 路由配置
setupRoute(app)
// 配置 store
setupStore(app)
app.mount('#app')