36｜数据流原理：Vuex & Pinia源码剖析
大圣
该思维导图由 AI 生成，仅供参考
你好，我是大圣。
上一讲我们分析了 Vite 原理，今天我们来剖析 Vuex 的原理。其实在之前的课程中，我们已经实现过一个迷你的 Vuex，整体代码逻辑比较简单，基于 Vue 提供的响应式函数 reactive 和 computed 的能力，我们封装了一个独立的共享数据的 store，并且对外暴露了 commit 和 dispatch 方法修改和更新数据，这些原理就不赘述了。
今天我们探讨一下下一代 Vuex5 的提案，并且看一下实际的代码是如何实现的，你学完之后可以对比之前 gvuex mini 版本，感受一下两者的区别。
Vuex5 提案
由于 Vuex 有模块化 namespace 的功能，所以模块 user 中的 mutation add 方法，我们需要使用 commit('user/add') 来触发。这样虽然可以让 Vuex 支持更复杂的项目，但是这种字符串类型的拼接功能，在 TypeScript4 之前的类型推导中就很难实现。然后就有了 Vuex5 相关提案的讨论，整个讨论过程都是在 GitHub 的 issue 里推进的，你可以访问GitHub 链接去围观。
Vuex5 的提案相比 Vuex4 有很大的改进，解决了一些 Vuex4 中的缺点。Vuex5 能够同时支持 Composition API 和 Option API，并且去掉了 namespace 模式，使用组合 store 的方式更好地支持了 TypeScript 的类型推导，还去掉了容易混淆的 Mutation 和 Action 概念，只保留了 Action，并且支持自动的代码分割。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了Vuex5的提案以及Pinia的原理和使用方法。Vuex5相比Vuex4有显著改进，支持Composition API和Option API，去除了namespace模式，更好地支持了TypeScript的类型推导。Pinia作为Vue的官方项目，具有类型安全、Vue的Devtools支持、易扩展、只有1KB的体积等优点。文章通过对Pinia的源码进行解析，展示了Pinia的创建和使用方法，以及如何定义和使用store。通过对Pinia的createPinia、defineStore和createSetupStore等方法的分析，读者可以深入了解Pinia的内部实现和原理。总的来说，本文通过对Vuex和Pinia的原理和使用方法进行剖析，帮助读者了解了这两个状态管理工具的特点和使用方式。文章内容深入浅出，适合对Vue状态管理工具感兴趣的读者阅读。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
- james没有关联的组件之间可以使用 pinia2022-01-133
- 李增createSetupStore 函数的实现分析部分，有点收尾匆忙了，只说了重点，没有完整捋清楚createSetupStore 的完整实现细节。对于能自己去阅读源码的人来说，倒是没啥，但是对于底子差点的人来说，就很难懂createSetupStore 函数的整个内部实现运作原理了。大圣老师是否可以再补充下这一块的细节哈～2022-03-2732
浣花公子嗯 这个写法就很像 React + Redux + immer2022-10-28归属地：吉林
收起评论