Pinia能否替代 Vuex 的更强大状态管理工具

news2025/5/21 1:52:50

前序

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 并使用它来访问状态、调用操作等：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useMyStore } from './store';

export default defineComponent({
  setup() {
    const myStore = useMyStore();

    const count = myStore.count;
    const doubleCount = myStore.doubleCount;

    const increment = () => {
      myStore.increment();
    };

    return { count, doubleCount, increment };
  },
});
</script>

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 插件，你可以轻松实现状态的持久化，无需手动处理本地存储。你可以根据需要配置更多的选项，例如设置过期时间或自定义存储键。这有助于简化状态管理和数据的持久化工作。