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