pinia的基本使用和核心实现原理

前言

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的语法