Vuex/Pinia源码
2023-06-29 14:32:03 0 举报AI智能生成
Vuex/Pinia源码
作者其他创作
大纲/内容
Pinia
特点
直观
简化store/state/action的设计
类型安全
良好的typescript支持
开发工具支持
浏览器插件支持
可扩展
插件中间件
模块化设计
store拆分设计
极轻
实现代码少
实现思考
pinia如何存值如何取值
统一存在pinia.state中
获取store也是通过pinia.state获取
值如何响应式
reactive
问题
Q: 为什么废弃掉mutation
Q: state为什么需要computed跟踪变化
Pinia源码
<b>执行流程</b>
createPinia
创建pinia对象
<b><font color="#e74f4c">install</font></b><br>供vue.use使用<br>
将<b>pinia</b>存储到<b>globalProperties</b><br>
注册<b>provide</b><br>
将<b>toBeInstalled</b>推入<b>_p</b>(插件列表)<br>
<b><font color="#e74f4c">use</font></b><br>pinia的插件系统
将插件推入<b>_p</b>
如果没有被<b>install</b>则推入<b>toBeInstalled</b>
<font style=""><b><font color="#e74f4c">state</font></b><br>通过ref创建</font>
所有defineStore创建的store都会在此备份<br>
<b><font color="#e74f4c">_a<br></font></b>Vue实例
<b><font color="#e74f4c">_e<br></font></b>通过effectScope创建<br>
方便defineStore使用_e.run
<font color="#e74f4c"><b>_s</b><br></font>通过new Map创建
<b>其他</b><br><b>toBeInstalled</b>存储在<b>install</b>之前被<b>pinia</b>.<b>use</b>的<b>pinia</b>插件<br>
defineStore<br>
返回<b>useStore</b>函数
<font color="#569230"><u>执行</u></font>
<u><b>判断是否安装pinia<br></b></u>通过全局变量activePinia
否
警告
是否注册过该<b>id</b>的<b>store</b>
否
判断传入的第二参数是<b>setup</b>还是<b>options</b><br>
<b>Setup Store</b>
createSetupStore
初始化 pinia.state.value[$id]<br>
<b><u><font color="#569230">创建store对象<br></font></u></b>通过reactive创建<br>
返回store
_p<br>
pinia实例<br>
$id
store id
$onAction<br>监听action
监听action<br>执行wrapAction触发<br>
$patch<br>修改state
判断传入的是不是function<br>
function
传入 state = pinia.state.value[$id] 执行<br>
state对象
合并当前state和传入state<br>
$reset<br>重置state
通过$patch重置state<br>
$subscribe<br>监听state<br>
通过watch监听触发<br>
通过$path触发
$dispose<br>注销该store<br>
scope.stop()<br>注销setup的副作用
subscriptions = []<br>清空$subscribe的监听<br>
actionSubscriptions = []<br>清空$onAction的监听<br>
pinia._s.delete($id)<br>删除map存储的store
<b><u><font color="#569230">存储store<br></font></u></b>pinia._s.set($id, store)<br>
避免无限循环?
<b><u><font color="#569230">执行setup函数<br></font></u></b>通过_e(effectScope).run执行传入的setup<br>并得到setup的返回值
<u><b><font color="#569230">处理state<br></font></b></u>遍历处理setup返回的值
返回中的ref/reactive
处理SSR情况下的初始state
设置 pinia.state.value[$id][key] = prop<br>
返回中的函数
使用wrapAction包裹函数执行<br>
<b><u><font color="#569230">将store.$store指向pinia.state<br></font></u></b>store.$store<br>
get: pinia.state.value[$id]
set: $patch(($state) => { assign($state, state) })<br>
安装执行插件<br>
通过_e(effectScope).run执行插件函数<br>
extender({ store, app: pinia._a, pinia, options: optionsForPlugin })<br>
其他
内部方法
wrapAction
所有返回的函数都要经过wrapAction执行<br>主要有以下作用
容错执行action<br>
promise action处理
try catch执行action
触发action监听
<b>Option Store</b>
createOptionsStore
创建setup函数
从options解构出state/actions/getters<br>
合并state/actions/getters<br>
pinia.state.value[id]指向state()
state使用toRefs+ref批量处理
getter使用computed处理
将setup传入createSetupStore执行<br>store = createSetupStore(id, setup, options, pinia, hot, true)
是
根据id获取store<br>pinia._s.get(id)<br>
返回store
0 条评论
下一页
