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的缺点

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

你可能感兴趣的:(前端,typescript,javascript,前端,vue)