菠萝（Pinia）真好吃

Vuex 复杂的 mutation, action, getter 曾让人头大。Pinia 的出现，简直是清流。

为什么是 Pinia？

  1. 没有 Mutation：终于不用为了改个状态写那繁琐的模板代码了，直接在 Action 里改，或者直接改！
  2. TypeScript 友好：完美的类型推断，不用像 Vuex 那样写一堆泛型接口。
  3. 极简 API：defineStore 一把梭。

逐渐掉光的头发

随着学习的深入，我发现事情并不像我想象的那么简单。Pinia 这个知识点，简直是我的噩梦。

文档里写得轻描淡写，实际用起来坑巨多。比如，我在 store 里解构 state，结果响应性丢了！

1
2
const store = useUserStore()
const { name } = store // ❌ 响应性丢失

必须用 storeToRefs(store)。这种细节，一旦不知道，就是一下午的调试时间。

令人头秃的细节

在这个快速发展的前端时代，技术的更新迭代速度简直让人窒息。每一次框架的更新，不仅带来了新的特性，也带来了新的焦虑。作为一名追求极致体验的开发者，我深知持续学习的重要性。但是，Pinia 的某些行为真的很迷。

比如，它在服务端渲染（SSR）下的 hydration 问题，经常导致客户端和服务端数据不一致，你以为数据传过去了，结果是如传。我花了整整三天时间查阅源码，翻遍了 GitHub 上的 Issues，才勉强理解了其中的奥妙。简单来说，它就像是一个黑盒子，你输入 A，它输出 B，但中间发生了什么，只有上帝和尤雨溪知道。

Pinia