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

前言

  • vuex缺点:ts兼容性不好、命名空间的缺陷、只能有一个store、mutation和action
  • pinia 优点:ts兼容性好 、不需要命名空间,可以创建多个store、mutation删掉了
  • pinia只具备以下几个属性,状态、计算属性、动作
  • pinia大小也会更小巧一些

我们先创建一个项目

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

下载依赖

安装pinia

main.js中使用pinia插件

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

在src下创建stores

stores我们先创建一个counter.js文件

  • 用pinia里的defineStore方法创建一个store

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

  • actions里的this就指代store
  • 同步异步方法都在action里处理

组件中使用

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

  • 组件中可以在store里直接使用store中的状态、计算属性以及action里的方法,并且都是响应式的

创建store还可以传递一个setup函数

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

下面我们来实现它

在src下创建pinia文件夹,文件夹下创建createPinia.js、defineStore.js,这俩是pinia两个主要的api实现

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

再创建一个index.js把这俩api导出去

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

我们先来实现createPinia

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

  • 用markRow标记,防止pinia被再次的做响应式处理,不让它变成响应式的

创建rootStore文件,用于存放一些名字

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

提供install方法

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

  • 将pinia实例暴露到app上,所有组件都可以inject注入使用
  • 保证vue2里也可以通过$pinia使用
  • 将app保留一份在pinia上

所有store统一管理

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

  • 创建一个scope独立空间
  • run方法的返回值就是回调函数fn的返回值
  • 将state、scope和记录所有store放到实例上,还有保存着app的_a

我们再来实现defineStore.js

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

  • 第一个参数可能是id也可能没有第一个参数,参数只有一个对象,name放在了对象里面,还有一种情况,第二个参数可能是一个对象也可能是一个setup

definedStore还需要提供useStore函数

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

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

  • 返回useStore函数,内部注册一个Store
  • 为了保证useStore在组件内部使用,那么我们需要通过判断currentInstance来保证useStore在组件内部使用ore
  • 看一下pinia上有没有这个store,如果没有,说明是第一次使用这个store,那么我们就去创建一个调用createOptionsStore去创建一个store
  • createOptionsStore拿到用户传的state、getters、actions
  • 我们要让外面的effectScope能够停止所有的store,也要让每个store能停止自己

处理setup函数

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

  • 将state保存在pinia的state上对应的store的state中
  • 将该store的state值返回出去
  • pinia里每一个store其实都是一个reactive
  • 我们将每个store里的数据与这个store进行合并,扩展当前store的属性
  • 将id也就是当前store的name名字与这个响应式store做一个映射保存在pinia的实例上,它是一个map映射

最后我们在useStore里把store进行返回

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

处理actions

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

  • actions里面有this问题,所以我们要处理actions的方法里的this

处理getters

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

  • 用computed的原因是computed有缓存的性质

defineStore第二个参数除了对象的方式,还可以传一个函数的情况

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

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

  • 判断第二个参数是不是一个setupStore,如果是函数,说明是一个setup语法
  • 如果是setupStore创建setupStore,如果不是则创建我们之前实现的optionsStore
  • 还是要先创建一个响应式的store,然后处理effectScope逻辑
  • 然后处理actions的逻辑,以及最后合并的逻辑与之前创建optionsStore逻辑都一样,唯一不同的setup函数不用我们自己写了

最后建议

般不用高级语法的话,可以直接写成对象格式也就是optionsStore,更符合类似于vuex的语法

发表评论

提供最优质的资源集合

立即查看 了解详情