pinia的注册以及初始化仓库Store

新建文件夹

在src目录下新建一个store文件夹。

引入注册pnia

1. 在store目录下创建index.ts

   index.ts文件用来引入和全局注册pinia:

   import { type App } from 'vue'
   import { createPinia } from 'pinia'
   
   const store = createPinia()
   
   export const setupStore = (app: App) => {
       app.use(store)
   }
   
   export { store } // 在各个仓库中引入，传给usexxxStore函数，方便在setup()外使用store
   

初始化store仓库

1. 在store目录下创建modules文件夹，并创建相关的 .ts文件

   

2. 引入defineStore hook函数

   import { defineStore } from 'pinia'
   

   defineStore() 接收两个参数，第一个参数是一个id（可以看作是store的命名空间），第二个参数是是一个对象。

3. 新建一个命名空间名字的.d.ts文件

   前面我们说到，defineStore函数接收两个参数，其中第一个参数是store的id（命名空间的名字）。那么这个命名空间的名字可以抽离到一个.d.ts文件中，并且使用枚举的形式定义： namespaced.d.ts：

   export enum StoreNames {
       USER = 'user'
   }
   

4. 调用defineStore方法

   import { StoreNames } from './namepaced'
   export const useUserStore = defineStore(StoreNames.USER, {
         // 定义全局共享状态的一个初始化状态
         state: () => ({
           username: '张三',
           age: 0,
           gender: '男'
         }),
         // getters类似于computed计算属性，也具有缓存作用，用来修饰一些需要通过逻辑计算的值
         getters: {},
         // actions类似于methods，可以有同步和异步方法，修改state中的状态
         actions: {}
   })
   

   你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。

5. 导出一个方便在 setup() 外使用store的hook函数

   • 引入store/index.ts中的store变量

     import { store } from '../index.ts'
     

   • 导出

     export function useUserStoreHook () {
         return useUserStore(pinia)
     }
     

   官方的解释：如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数。

   在这里useStore对应的就是useUserStore()。

setup中使用store

1. 引入store

   <script setup lang='ts'>
       import { useUserStore } from '@/store/modules/user'
   
       const userStore = useUserStore()
   </script>
   

2. 获取state

   <template>
     <div>
       <div>{{ userStore.username }}</div> // 张三
     </div>
   </template>
   <script setup lang='ts'>
       import { useUserStore } from '@/store/modules/user'
   
       const userStore = useUserStore()
   
       console.log(userStore.gender); // 男
   </script>