Pinia能否替代 Vuex 的更强大状态管理工具
前序
Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库，也相当于vuex5，下面关于vuex5的提案是不是觉得很像
Vuex5 的提案
Pinia和Vuex的函数
Vuex： State、Getters、Mutations(同步)、Actions(异步)
Pinia： State、Getters、Actions(同步异步都支持)
vuex的最新版为4.x
- vuex4对标vue3的使用
- vuex3对标vue2的使用
pinia的最新版为2.x
- 适用vue2也支持vue3
区别
-
pinia 没有 mutations，actions的使用不同（pinia支持同步异步），getters的使用是一致的
-
pinia 没有总出口全是模块化，需要定义模块名称，当多个模块需要协作的时候需要引入多个模块，vuex是有总出口的，在使用模块化的时候不需要引入多个模块
-
pinia 在修改状态的时候不需要通过其他api，vuex需要通过commit，dispatch去修改
pinia的安装和使用
安装 Pinia
使用 npm 或 yarn 安装 Pinia：
npm install pinia
# 或者
yarn add pinia
创建 Pinia Store
在你的项目中创建一个 Pinia store，可以通过创建一个 .ts 文件来实现。例如，你可以创建一个名为 store.ts 的文件：
import { defineStore } from 'pinia';
export const useMyStore = defineStore('myStore', {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++;
},
},
});
在这个示例中，我们创建了一个名为 myStore 的 Pinia store，其中包含一个状态变量 count、一个 getter doubleCount 和一个 action increment。
注册 Pinia
在你的应用程序的入口文件中（通常是 main.ts），注册 Pinia：
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
在 Vue 组件中使用 Pinia Store
在你的 Vue 组件中引入 useMyStore 并使用它来访问状态、调用操作等：
Count: {{ count }}
Double Count: {{ doubleCount }}
vuex和pinia的优缺点
Pinia 的优点
- Pinia 允许你在不重新加载页面的情况下修改你的商店。
- Pinia 是为 TypeScript 设计的，提供了强类型支持，可以在开发过程中捕获更多的错误，使代码更具可维护性和可读性。
- Pinia 提供 devtool 支持，这有助于增强开发人员使用该工具的体验。
- pinia中只有state、getter、action，抛弃了Vuex中的Mutation
- 无需再创建各个模块嵌套了，Vuex中如果数据过多，我们通常分模块来进行管理，而pinia中每个store都是独立的，互相不影响
- 体积非常小，只有1KB左右
- pinia支持插件来扩展自身功能
- 支持服务端渲染
- Pinia 兼容 Vue 2 和 Vue 3。
Pinia 的缺点
- 与 Vuex 相比，它没有庞大的社区支持和解决方案。
- Pinia 不支持调试功能，如时间旅行和编辑。
Vuex 的优点
- Vuex 有 mutations、getters 和 actions。
- 与 Pinia 相比，Vuex 的社区支持很大。
- Vuex 支持调试功能，如时间旅行和编辑。
Vuex 的缺点
- 它对 TypeScript 不友好。
- 你只能将其用于大型 SPA。
实现本地存储
安装插件
需要安装 pinia-plugin-persist 插件和 Pinia：
npm install pinia pinia-plugin-persist
# 或者
yarn add pinia pinia-plugin-persist
创建 Pinia Store
创建一个 Pinia store，用于管理需要持久化的状态。
// store.js
import { defineStore } from 'pinia';
import { usePersist } from 'pinia-plugin-persist';
export const useMyStore = defineStore({
id: 'myStore',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
});
// 使用插件进行状态持久化
usePersist(useMyStore, {
// 配置选项
// 默认存储在 localStorage
// 如果需要使用 sessionStorage，可以指定 storage: 'sessionStorage'
key: 'myStore', // 存储的键名
// 可以添加更多配置选项，例如过期时间
});
使用 pinia-plugin-persist 插件，你可以轻松实现状态的持久化，无需手动处理本地存储。你可以根据需要配置更多的选项，例如设置过期时间或自定义存储键。这有助于简化状态管理和数据的持久化工作。
vuex和pinia的选择场景
Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目