Vuex 与 Pinia：Vue 状态管理详解，小白也能看懂

引言：为什么需要状态管理？

在 Vue 开发中，我们经常需要在多个组件之间共享数据。例如用户登录信息、购物车内容、主题设置等。这些数据如果通过父子组件层层传递（props 和 emit），不仅代码冗长，还容易出错。

为了解决这个问题，Vue 提供了状态管理工具 ，帮助我们在应用的不同部分共享和管理数据。其中最经典的是 Vuex ，而随着 Vue 3 的推出，官方推出了更轻量、更现代化的替代方案------Pinia。

本文将带你从零开始了解 Vuex 和 Pinia 的基本概念、使用方法以及它们之间的区别，让你轻松掌握 Vue 应用的状态管理方式。

一、什么是状态管理？

简单来说，状态就是你的应用中那些会变化的数据。比如用户的登录状态、表单输入内容、商品列表等。

状态管理的核心思想是：把多个组件都需要访问的数据集中存储在一个"仓库"里，这样所有组件都可以直接读取或修改这个仓库中的数据，而不必一层层传参。

这就像你家里的冰箱：谁都可以去里面拿东西，而不是每个人都自己带食物出门。

二、Vuex 的基本结构与使用

1. 什么是 Vuex？

Vuex 是 Vue 官方推荐的状态管理模式。它提供了一个全局唯一的 store 来统一管理应用的状态。

Vuex 的核心概念有四个：state、getter、mutation 和 action。

✅ State：状态数据

这是你存放数据的地方，可以理解为整个应用的"变量"。

js 复制代码

state: {
  count: 0
}

✅ Getter：获取状态的计算属性

类似于 Vue 组件中的 computed 属性，用于派生一些基于 state 的值。

js 复制代码

getters: {
  doubleCount(state) {
    return state.count * 2;
  }
}

✅ Mutation：修改状态的方法（同步）

必须通过 mutation 来修改 state，它是唯一能直接更改 state 的地方。

js 复制代码

mutations: {
  increment(state) {
    state.count++;
  }
}

✅ Action：处理异步操作

如果你要从服务器获取数据后再更新状态，就需要用 action。

js 复制代码

actions: {
  asyncIncrement({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
}

2. 在项目中使用 Vuex

第一步：安装 Vuex

bash 复制代码

npm install vuex@next --save

第二步：创建 store 并挂载到 Vue 实例

js 复制代码

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  modules: {}
});

js 复制代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

第三步：在组件中使用

vue 复制代码

<template>
  <div>
    当前计数：{{ count }}
    <p>双倍计数：{{ doubleCount }}</p>
    <button @click="increment">+1</button>
    <button @click="asyncIncrement">异步 +1</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement');
    }
  }
};
</script>

三、Pinia：新一代的状态管理工具

随着 Vue 3 的发布，官方推出了一个全新的状态管理库 ------ Pinia，它比 Vuex 更加简洁、模块化，并且完全支持 TypeScript。

1. Pinia 的优势

更简单的 API，学习成本更低。
模块化设计，无需手动拆分 modules。
支持 Vue 2 和 Vue 3。
更好的 TypeScript 支持。
不再区分 mutations 和 actions。

2. 核心概念

Pinia 的核心是 store，每个 store 可以包含：

state：定义状态数据。
getters：计算属性。
actions：可以是同步也可以是异步，用于修改状态。

3. 创建一个 Pinia Store

第一步：安装 Pinia

bash 复制代码

npm install pinia

第二步：创建 Pinia 实例并挂载

js 复制代码

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const pinia = createPinia();
const app = createApp(App);

app.use(pinia);
app.mount('#app');

第三步：创建一个 store

js 复制代码

// stores/counterStore.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
    async asyncIncrement() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.count++;
    }
  }
});

第四步：在组件中使用

vue 复制代码

<template>
  <div>
    当前计数：{{ counter.count }}
    <p>双倍计数：{{ counter.doubleCount }}</p>
    <button @click="counter.increment()">+1</button>
    <button @click="counter.asyncIncrement()">异步 +1</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counterStore';

const counter = useCounterStore();
</script>

四、Vuex 与 Pinia 的对比

特性	Vuex	Pinia
是否官方推荐	是（Vue 2）	是（Vue 3 推荐）
是否支持 Vue 2	是	是
是否支持 TS	支持但配置复杂	原生支持
模块化设计	需手动配置 modules	天然模块化
API 简洁度	相对复杂	更加简洁直观
是否区分 actions / mutations	区分	合并为 actions
学习曲线	较陡峭	更低

五、常见问题与解决方案

1. Vuex 报错："TypeError: Cannot assign to read only property"

原因：Vuex 的 state 默认是只读的，不能直接赋值修改。
解决办法 ：一定要通过 commit 调用 mutation 来修改。

2. Pinia 中如何监听状态变化？

使用 watch 或 watchEffect 监听某个状态的变化：

js 复制代码

watchEffect(() => {
  console.log('当前计数:', counter.count);
});

3. 如何持久化保存状态？

可以结合 localStorage：

js 复制代码

// 在 action 中保存
saveToLocalStorage() {
  localStorage.setItem('counter', JSON.stringify(this.count));
}

// 初始化时读取
state: () => ({
  count: JSON.parse(localStorage.getItem('counter') || '0')
})

六、面试题解析

1. Vuex 中 state、getter、mutation、action 分别是什么？

state：存储应用的状态数据。
getter：从 state 衍生出来的计算属性。
mutation：唯一能直接修改 state 的方法（同步）。
action：执行异步操作，通常调用 mutation 修改状态。

2. Pinia 与 Vuex 有什么区别？

Pinia 更加简洁，不区分 mutation 和 action。
Pinia 天然模块化，无需手动配置。
Pinia 对 TypeScript 支持更好。
Pinia 更适合 Vue 3 项目，Vuex 更适用于 Vue 2。

3. 为什么 Vuex 要用 mutation 来修改状态？

为了保持状态变更的可追踪性，mutation 是同步的，方便调试工具记录每一次状态变化。

4. Pinia 中如何实现模块化？

Pinia 的每个 store 就是一个模块，不需要像 Vuex 那样手动配置 modules。

5. 如何在组件中使用多个 store？

在 Pinia 中，你可以同时引入多个 store：

js 复制代码

import { useCounterStore } from '@/stores/counterStore';
import { useUserStore } from '@/stores/userStore';

const counter = useCounterStore();
const user = useUserStore();

七、总结

无论是 Vuex 还是 Pinia，它们都是用来帮助我们更好地管理 Vue 应用中数据状态的工具。Vuex 功能强大，适合大型项目；而 Pinia 更加轻量、灵活，适合中小型项目，尤其是 Vue 3 项目。

作为初学者，建议你先掌握 Vuex 的基本用法，理解其设计理念。然后过渡到 Pinia，你会发现它的写法更加现代、易懂。

📚 扩展阅读建议

Vuex 官方文档
Pinia 官方文档
《Vue.js 设计与实现》------霍春阳
《深入浅出 Vue.js》------刘博文

希望这篇文章能帮助你理解 Vuex 和 Pinia 的区别与联系，并在实际开发中选择合适的状态管理工具。如果你正在准备前端面试，这部分内容也非常重要哦！