vue 状态管理
pinia 实现原理
- 利用 vue 的 use,调用 pinia 提供的 install 方法,通过 vue 的 provide,将当前 pinia 实例注册到每个组件实例里去。
- 当业务里使用 usexx 时,会调用 pinia 内部方法,defineStore 去初始化仓库 store 对象
- 首先根据参数类别,利用 TS 函数重载,执行不同的方法处理 options 参数和 id,
- 然后将 state 利用 composition api 做响应式处理和转换,然后挂载到 store 上面
- 再把 pinia 的 api 挂载到 store 上面
- 挂载完在执行 pinia 的插件,去修改 store
- 最后将这个 Store 返回出去
storeToRef
vuex 原理
- 利用 vue 的 use 方法,vuex 提供 install 方法,vue 将 vuex 对象,通过$options 挂载到 vue 组件全局。
- 利用 new Vue 实例,创建响应式 data,然后 vuex 类内部创建 get state 方法,返回这个 vue 实例的 data
- getter 方法,则是遍历 getter 内部的方法,使用 object.definePropty,劫持 get 方法,内部将 state 当做参数,传入 getter 里的每个方法,执行,然后 return 出去。这个操作,让 getter 方法不用执行就可以拿到结果
- mutation 方法,遍历所有方法对象,然后重新赋值为一个新的单参数函数,函数在内部将 state 和外部的参数,代入到 mutation 的每个方法,执行。
- 提供 commit 方法,接受 mutation 的方法名和修改的数据值参数,内部通过获取 mutation 方法,代入数据值参数,执行
- actions 方法,和 commit 类似,生成的单参数函数内部,会传入 this 和修改的数据值参数
区别
- 去掉了 mutaions 属性,同时提供了$reset,$onActions 这类 API
JStar