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源码
执行流程
createPinia
创建pinia对象
install
供vue.use使用
供vue.use使用
将pinia存储到globalProperties
注册provide
将toBeInstalled推入_p(插件列表)
use
pinia的插件系统
pinia的插件系统
将插件推入_p
如果没有被install则推入toBeInstalled
state
通过ref创建
通过ref创建
所有defineStore创建的store都会在此备份
_a
Vue实例
Vue实例
_e
通过effectScope创建
通过effectScope创建
方便defineStore使用_e.run
_s
通过new Map创建
通过new Map创建
其他
toBeInstalled存储在install之前被pinia.use的pinia插件
toBeInstalled存储在install之前被pinia.use的pinia插件
defineStore
返回useStore函数
执行
判断是否安装pinia
通过全局变量activePinia
通过全局变量activePinia
否
警告
是否注册过该id的store
否
判断传入的第二参数是setup还是options
Setup Store
createSetupStore
初始化 pinia.state.value[$id]
创建store对象
通过reactive创建
通过reactive创建
返回store
_p
pinia实例
$id
store id
$onAction
监听action
监听action
监听action
执行wrapAction触发
执行wrapAction触发
$patch
修改state
修改state
判断传入的是不是function
function
传入 state = pinia.state.value[$id] 执行
state对象
合并当前state和传入state
$reset
重置state
重置state
通过$patch重置state
$subscribe
监听state
监听state
通过watch监听触发
通过$path触发
$dispose
注销该store
注销该store
scope.stop()
注销setup的副作用
注销setup的副作用
subscriptions = []
清空$subscribe的监听
清空$subscribe的监听
actionSubscriptions = []
清空$onAction的监听
清空$onAction的监听
pinia._s.delete($id)
删除map存储的store
删除map存储的store
存储store
pinia._s.set($id, store)
pinia._s.set($id, store)
避免无限循环?
执行setup函数
通过_e(effectScope).run执行传入的setup
并得到setup的返回值
通过_e(effectScope).run执行传入的setup
并得到setup的返回值
处理state
遍历处理setup返回的值
遍历处理setup返回的值
返回中的ref/reactive
处理SSR情况下的初始state
设置 pinia.state.value[$id][key] = prop
返回中的函数
使用wrapAction包裹函数执行
将store.$store指向pinia.state
store.$store
store.$store
get: pinia.state.value[$id]
set: $patch(($state) => { assign($state, state) })
安装执行插件
通过_e(effectScope).run执行插件函数
extender({ store, app: pinia._a, pinia, options: optionsForPlugin })
其他
内部方法
wrapAction
所有返回的函数都要经过wrapAction执行
主要有以下作用
主要有以下作用
容错执行action
promise action处理
try catch执行action
触发action监听
Option Store
createOptionsStore
创建setup函数
从options解构出state/actions/getters
合并state/actions/getters
pinia.state.value[id]指向state()
state使用toRefs+ref批量处理
getter使用computed处理
将setup传入createSetupStore执行
store = createSetupStore(id, setup, options, pinia, hot, true)
store = createSetupStore(id, setup, options, pinia, hot, true)
是
根据id获取store
pinia._s.get(id)
pinia._s.get(id)
返回store
0 条评论
下一页
