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

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取