433 字
1 分钟
Pinia：Vuex 的继任者，好吃又好用
菠萝（Pinia）真好吃
Vuex 复杂的 mutation, action, getter 曾让人头大。Pinia 的出现，简直是清流。
为什么是 Pinia？
- 没有 Mutation：终于不用为了改个状态写那繁琐的模板代码了，直接在 Action 里改，或者直接改！
- TypeScript 友好：完美的类型推断，不用像 Vuex 那样写一堆泛型接口。
- 极简 API：
defineStore一把梭。
逐渐掉光的头发
随着学习的深入，我发现事情并不像我想象的那么简单。Pinia 这个知识点，简直是我的噩梦。
文档里写得轻描淡写，实际用起来坑巨多。比如，我在 store 里解构 state，结果响应性丢了！
const store = useUserStore()const { name } = store // ❌ 响应性丢失必须用 storeToRefs(store)。这种细节，一旦不知道，就是一下午的调试时间。
令人头秃的细节
在这个快速发展的前端时代，技术的更新迭代速度简直让人窒息。每一次框架的更新，不仅带来了新的特性，也带来了新的焦虑。作为一名追求极致体验的开发者，我深知持续学习的重要性。但是，Pinia 的某些行为真的很迷。
服务端渲染并不是 Pinia 天生就会翻车：按官方方式在 setup 顶层创建 Store，基础 SSR 可以直接工作。真正需要小心的是把请求间状态隔离开、序列化初始状态，以及在组件外使用 Store 时传对当前应用的 Pinia 实例。问题从“玄学 hydration”拆成这三项后，排查就清楚多了。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Pinia：Vuex 的继任者，好吃又好用
https://blog.luozili.work/posts/vue-learning-6/ 部分信息可能已经过时
相关文章 智能推荐
1
深坑记录：响应式丢失的那一夜
Vue学习之路 复盘一次保存成功但列表不更新的问题，定位对象解构导致的 Vue 响应式丢失，并总结排查顺序。
2
生命周期钩子：生老病死，Vue 组件的一生
Vue学习之路 按创建、挂载、更新和卸载阶段梳理 Vue 3 组件生命周期，以及各类钩子的典型使用场景。
3
Composition API：逻辑复用的快乐与痛苦
Vue学习之路 记录用 Composable 提取 Vue 3 业务逻辑时的收益、边界，以及逻辑复用过度后出现的新复杂度。
4
我累了：试图理解源码，结果被源码理解了
Vue学习之路 记录第一次阅读 Vue 3 响应式和渲染器源码时，从建立入口地图到被 PatchFlags 劝退的过程。
5
Vue 3 启航
Vue学习之路 从 jQuery 时代的回忆出发，记录第一次系统学习 Vue 3、Vite 与组合式 API 的过程。