收藏 Vue技术

pinia源码解读--实现概览

2022-06-01 本文已影响0人习惯水文的前端苏

$\bullet$ 前言

之前已经通过读文档，写demo，知道了pinia怎么用，今天，来研究下pinia是怎么实现的

$\bullet$ 程序入口

通过script中的build命令找到rollup配置文件

从打包配置可以看出其入口为src下的index

$\bullet$ 向vue注册（初始化）

示例代码

通过vue的插件机制，允许向整个应用程序注册全局共享的功能，写法一般固定为对象内含install方法，由于pinia同时支持vue2和vue3，在入口处其暴漏了PiniaVuePlugin和createPinia来分别实现插件注册

$\ast$ PiniaVuePlugin

该函数利用mixins api向组件混入了beforeCreate周期钩子，由于vue在组件实力化过程中会先读取全局的mixins并会经过一次配置合并过程，其中对生命周期的合并策略是数组的push，故每一个组件实例初始化过程中都会callhook到beforeCreate

如下框红所示，每一个组件实例中都将通过this访问到pinia实例

$\ast$ createPinia

与vue2不同的是，vue3中通过provide+inject的方式向子孙组件注入

$\bullet$ 定义、使用子模块store

示例代码

调用createPinia时，会向全局创建一个空对象作为根store，在组件使用时则对外提供了defineStore来定义组件的store，这实际是在向根store做“add”操作

示例代码

执行定义函数调用后返回的useStore方法，会首先获取到根store，接着将定义的本模块的store设置到根store上并返回

$\bullet$ store的创建过程

示例代码

承接上例

不管是option api形式还是setup形式，最终走的都是createSetupStore，在源码层面对option形式做了次转换

而store的创建过程其实分为两部分：解析并挂载定义的store、为store装饰api

$\ast$ 解析与挂载流程

$\ast$ 装饰api

这个比较简单，就是将内部的函数挂载到对象上并return出去即可

$\bullet$ api相关

$\ast$ $reset

该api是$patch的语法糖，只不过传递的参数是初始的state函数的执行结果

$\ast$ $patch

patch就是一次递归对value覆盖的过程

$\ast$ $subscribe

有点类似观察者，当调用subscribe时，会将当前的状态信息保存到subscriptions

此时，只需要在调用修改store相关的api时，拿到subscriptions的数组依次run一遍即可

$\bullet$ 插件机制

通过pinia.use向pinia实例的_p属性做缓存

接着，在创建store时将store传递给插件并执行，如下extender即调用插件的初始化逻辑

上一篇下一篇

猜你喜欢

热点阅读