vue中的Pinia

Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态；

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。

现在官方网站的生态推荐已经将Vuex换成了Pinia.

Pinia 的优点

Pinia 被 vue 纳入正规编制，肯定是有原因的，那 pinia 有啥优点呢，主要是一下几点：

pinia 符合直觉，易于学习。

pinia 是轻量级状态管理工具，大小只有1KB.

pinia 模块化设计，方便拆分。

pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。

store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。

支持多个 store。

支持 Vue devtools、SSR、webpack 代码拆分。

与Vuex相比的优势

有以下五点：

1.可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。

2.抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。

3.不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。

4.完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。

5.代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。