Pinia与Vuex

pinia于2021年11月24日正式成为vuejs的一员，轻量级的状态管理库，主要特点在其管理存储数据的独特功能（可扩展性、存储模块组织、状态变化分组、多存储创建等）。

pinia2跟vuex4都是与vue3兼容

pinia安装

yarn add pinia@next
# or with npm
npm install pinia@next

设置为全局对象，在main.ts中引入

import { createPinia } from 'pinia'
app.use(createPinia())

API Documentation | Pinia (vuejs.org)

• Pinia 不支持嵌套存储。相反，它允许你根据需要创建store。但是，store仍然可以通过在另一个store中导入和使用store来隐式嵌套
• 存储器在被定义的时候会自动被命名。因此，不需要对模块进行明确的命名。
• Pinia允许你建立多个store，让你的捆绑器代码自动分割它们
• Pinia允许在其他getter中使用getter
• Pinia允许使用 $patch 在devtools的时间轴上对修改进行分组。

Vuex 和 Pinia 的优缺点

Vuex的优点

• 支持调试功能，如时间旅行和编辑
• 适用于大型、高复杂度的Vue.js项目

Vuex的缺点

• 从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
• Vuex 4有一些与类型安全相关的问题

Pinia的优点

• 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
• 极其轻巧（体积约 1KB）
• store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
• 支持多个Store
• 支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点

• 不支持时间旅行和编辑等调试功能