Pinia初次使用的体会

Pinia相比vuex，少了mutations，并更加方便，且actions同步异步都支持，而vuex中actions只支持异步。

使用Pinia的流程：
- 在vue项目的入口文件中引入createPinia，并挂载于app上
- 创建项目结构中的store文件夹用来存放数据，引入defineStore，第一个参数为ID （全局唯一） ，第二个参数为一个对象，里面可以包含state、actions、getters；其中state必须是一个函数，而不是vuex中的对象形式，目的是防止数据污染，需要用return返回对象。箭头函数是为了更好的适配TS，使其能够判断类型。actions和getters均为对象形式。
- 组件中引入仓库文件，并调用该函数，赋值给一个常量。
  
  state
  - 类似于data
  - 需要在使用的组件中引入目标store，然后将函数的结果付给store（可更换），以下都使用store
  - 修改和读取值较少时，直接使用store.xxx即可。解构仓库中的数据必须使用storeToRefs，否则解构出的数据将会失去响应式，因为仓库其实是经过reactive包装的，并且这样解构之后在script中访问必须加上.value
  - 另一种方法就是store.$patch()
    1. 传入对象形式，这种方式为多次修改，一次提交。
      - 缺点：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要创建一个新集合 [来自官方]
```
 // store是组件中一个变量，接受了引入的仓库的结果
 store.$patch({
   counter: store.counter + 1,
   name: 'Abalam',
 })
复制代码
```
    1. 传入箭头函数 （推荐使用）
```
 // store是组件中一个变量，接受了引入的仓库的结果
 store.$patch((state) => {
   state.items.push({ name: 'shoes', quantity: 1 })
   state.hasChanged = true
 })
复制代码
```
  - 替换某个仓库全部的状态，使用store.$state
```
 store.$state = { counter: 666, name: 'Paimon' }
复制代码
```
  - 修改整个项目的仓库，使用pinia.state.value={}
```
 pinia.state.value = {}
复制代码
```
  actions
  - 类似于method
  - 可以像方法一样直接在组件中被调用store.xxxx()
  - actions支持异步和同步，在仓库中定义后，使用this可以访问到state
  - 若使用其他store的数据，只需内部引用即可
```
 actions: {
     method01() {
       // 外部store
       const other = useOtherStore()
     },
 }
复制代码
```
  getters
  - 类似于computed，有缓存
  - 可以传入state，也可以不传，使用this，但在TS中，传入state才可以进行类型推导，所以也可以传入state而不去使用它，而是使用this。
  - ```
   getters: {
       doubleCount(state) {
         return state.counter * 2
       },
     },
  复制代码
```
- 访问其他
  1. 其他getters（同一个store）：使用this访问即可
  2. 其他store的getters：要在内部引用
- 像vuex的modules一样分类存储，只需多创建几个仓库文件，在组件内按需引用即可，若一个仓库用到了另一个仓库的数据，也同样需要引用。

Pinia初次使用的体会

state

actions

getters

猜你喜欢