前言
- vuex缺点：ts兼容性不好、命名空间的缺陷、只能有一个store、mutation和action
- pinia 优点：ts兼容性好 、不需要命名空间，可以创建多个store、mutation删掉了
- pinia只具备以下几个属性，状态、计算属性、动作
- pinia大小也会更小巧一些
我们先创建一个项目
下载依赖
安装pinia
main.js中使用pinia插件
在src下创建stores
stores我们先创建一个counter.js文件
- 用pinia里的defineStore方法创建一个store
- actions里的this就指代store
- 同步异步方法都在action里处理
组件中使用
- 组件中可以在store里直接使用store中的状态、计算属性以及action里的方法，并且都是响应式的
创建store还可以传递一个setup函数
下面我们来实现它
在src下创建pinia文件夹，文件夹下创建createPinia.js、defineStore.js，这俩是pinia两个主要的api实现
再创建一个index.js把这俩api导出去
我们先来实现createPinia
- 用markRow标记，防止pinia被再次的做响应式处理，不让它变成响应式的
创建rootStore文件，用于存放一些名字
提供install方法
- 将pinia实例暴露到app上，所有组件都可以inject注入使用
- 保证vue2里也可以通过$pinia使用
- 将app保留一份在pinia上
所有store统一管理
- 创建一个scope独立空间
- run方法的返回值就是回调函数fn的返回值
- 将state、scope和记录所有store放到实例上，还有保存着app的_a
我们再来实现defineStore.js
- 第一个参数可能是id也可能没有第一个参数，参数只有一个对象，name放在了对象里面，还有一种情况，第二个参数可能是一个对象也可能是一个setup
definedStore还需要提供useStore函数
- 返回useStore函数，内部注册一个Store
- 为了保证useStore在组件内部使用，那么我们需要通过判断currentInstance来保证useStore在组件内部使用ore
- 看一下pinia上有没有这个store，如果没有，说明是第一次使用这个store，那么我们就去创建一个调用createOptionsStore去创建一个store
- createOptionsStore拿到用户传的state、getters、actions
- 我们要让外面的effectScope能够停止所有的store，也要让每个store能停止自己
处理setup函数
- 将state保存在pinia的state上对应的store的state中
- 将该store的state值返回出去
- pinia里每一个store其实都是一个reactive
- 我们将每个store里的数据与这个store进行合并，扩展当前store的属性
- 将id也就是当前store的name名字与这个响应式store做一个映射保存在pinia的实例上，它是一个map映射
最后我们在useStore里把store进行返回
处理actions
- actions里面有this问题，所以我们要处理actions的方法里的this
处理getters
- 用computed的原因是computed有缓存的性质
defineStore第二个参数除了对象的方式，还可以传一个函数的情况
- 判断第二个参数是不是一个setupStore，如果是函数，说明是一个setup语法
- 如果是setupStore创建setupStore，如果不是则创建我们之前实现的optionsStore
- 还是要先创建一个响应式的store，然后处理effectScope逻辑
- 然后处理actions的逻辑，以及最后合并的逻辑与之前创建optionsStore逻辑都一样，唯一不同的setup函数不用我们自己写了
最后建议
般不用高级语法的话，可以直接写成对象格式也就是optionsStore，更符合类似于vuex的语法
