Skip to content
大纲

vue 状态管理

pinia 实现原理

  1. 利用 vue 的 use,调用 pinia 提供的 install 方法,通过 vue 的 provide,将当前 pinia 实例注册到每个组件实例里去。
  2. 当业务里使用 usexx 时,会调用 pinia 内部方法,defineStore 去初始化仓库 store 对象
  3. 首先根据参数类别,利用 TS 函数重载,执行不同的方法处理 options 参数和 id,
  4. 然后将 state 利用 composition api 做响应式处理和转换,然后挂载到 store 上面
  5. 再把 pinia 的 api 挂载到 store 上面
  6. 挂载完在执行 pinia 的插件,去修改 store
  7. 最后将这个 Store 返回出去

storeToRef

vuex 原理

  1. 利用 vue 的 use 方法,vuex 提供 install 方法,vue 将 vuex 对象,通过$options 挂载到 vue 组件全局。
  2. 利用 new Vue 实例,创建响应式 data,然后 vuex 类内部创建 get state 方法,返回这个 vue 实例的 data
  3. getter 方法,则是遍历 getter 内部的方法,使用 object.definePropty,劫持 get 方法,内部将 state 当做参数,传入 getter 里的每个方法,执行,然后 return 出去。这个操作,让 getter 方法不用执行就可以拿到结果
  4. mutation 方法,遍历所有方法对象,然后重新赋值为一个新的单参数函数,函数在内部将 state 和外部的参数,代入到 mutation 的每个方法,执行。
  5. 提供 commit 方法,接受 mutation 的方法名和修改的数据值参数,内部通过获取 mutation 方法,代入数据值参数,执行
  6. actions 方法,和 commit 类似,生成的单参数函数内部,会传入 this 和修改的数据值参数

区别

  1. 去掉了 mutaions 属性,同时提供了$reset,$onActions 这类 API

Released under the MIT License.