当前位置：首页 > news >正文

从零基础到最佳实践：Vue.js 系列（5/10）：《状态管理》

news 来源：原创 2025/5/22 8:43:06

引言

你是不是正在用 Vue.js 开发一个很酷的应用，然后发现组件之间的数据传递变得越来越混乱？比如，一个按钮的状态要传到好几层组件，或者多个页面需要共享同一个用户信息。这时候，状态管理就登场了！在 Vue.js 中，状态管理是帮助我们组织和管理应用数据的“超级英雄”，让代码更清晰、更易维护。

这篇文章将带你从零开始了解 Vue.js 的状态管理，重点介绍两个热门工具：Vuex 和 Pinia。我们会用简单的语言讲解基础概念，配上代码示例和实际场景，还会聊聊 2025 年的技术趋势。无论你是新手还是有一定经验的开发者，相信都能有所收获！

什么是状态管理？

简单来说，状态管理就是管理应用中的数据（也就是“状态”）。在 Vue.js 中，状态可以是用户的登录信息、购物车里的商品列表，或者页面的加载状态。

在小型应用中，你可以用 props 和 emit 在组件间传递数据。但当应用变大，组件嵌套变深，这种方式就会变得麻烦。这时，状态管理工具就像一个“中央仓库”，把所有数据集中起来，任何组件都可以轻松访问和修改。

Vue.js 状态管理工具

截至 2025 年 5 月（假设我们用的是 Vue 3.5.13），Vue.js 社区主要推荐两种状态管理工具：Vuex 和 Pinia。下面我们来逐一了解它们。

1. Vuex：老牌状态管理工具

Vuex 是 Vue.js 官方的状态管理库，虽然在 Vue 3 时代逐渐被 Pinia 取代，但它依然很强大，适合一些复杂项目或已有 Vuex 基础的开发者。

基本概念

Vuex 的核心包括：

State：存放数据的“仓库”。
Getters：从 State 中派生出一些计算数据。
Mutations：同步修改 State 的方法。
Actions：处理异步操作，提交 Mutations。

安装与配置

先安装 Vuex（假设使用 npm）：

npm install vuex@next

然后创建一个 store：

// store/index.js
import { createStore } from 'vuex';export default createStore({state: {count: 0},getters: {doubleCount(state) {return state.count * 2;}},mutations: {increment(state) {state.count++;}},actions: {asyncIncrement({ commit }) {setTimeout(() => {commit('increment');}, 1000);}}
});

在 main.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');

使用示例

在组件中使用：

<template><div><p>计数: {{ $store.state.count }}</p><p>双倍计数: {{ $store.getters.doubleCount }}</p><button @click="$store.commit('increment')">加 1</button><button @click="$store.dispatch('asyncIncrement')">异步加 1</button></div>
</template><script>
export default {name: 'Counter'
};
</script>

实际场景

想象一个电商应用，用户添加商品到购物车时，可以用 Vuex 的 Action 发送请求到服务器，然后通过 Mutation 更新购物车状态。

2. Pinia：新一代状态管理利器

Pinia 是 Vue 3 官方推荐的状态管理库，设计更简洁，支持 TypeScript，API 更直观。到 2025 年，Pinia 已经成为大多数新项目的首选。

基本概念

Pinia 没有 Mutations，直接通过函数修改状态，分为：

State：定义初始状态。
Getters：计算属性。
Actions：处理逻辑（同步或异步）。

安装与配置

安装 Pinia：

npm install pinia

创建 store：

// stores/counter.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++;}}
});

在 main.js 中引入：

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';const app = createApp(App);
app.use(createPinia());
app.mount('#app');

使用示例

在组件中使用：

<template><div><p>计数: {{ counter.count }}</p><p>双倍计数: {{ counter.doubleCount }}</p><button @click="counter.increment()">加 1</button><button @click="counter.asyncIncrement()">异步加 1</button></div>
</template><script>
import { useCounterStore } from '@/stores/counter';export default {name: 'Counter',setup() {const counter = useCounterStore();return { counter };}
};
</script>

实际场景

在任务管理应用中，可以用 Pinia 存储任务列表，添加任务时直接调用 Action 更新状态，并在 Getter 中计算未完成任务数量。

Vuex vs Pinia：优缺点对比

特性	Vuex	Pinia
学习曲线	较陡峭，概念较多	简单，直观易上手
TypeScript 支持	一般，需要额外配置	原生支持，类型友好
性能	稍逊（需严格遵守规则）	更轻量，性能优化更好
社区趋势	逐渐减少，维护为主	2025 年主流选择

选择建议：

如果你在维护老项目或喜欢严格的结构，选 Vuex。
如果是新项目或追求简洁高效，选 Pinia。

状态管理最佳实践

模块化：将状态按功能拆分成多个模块（如用户、购物车）。
单一数据源：避免在组件和 store 中重复定义状态。
调试工具：用 Vue DevTools 监控状态变化。
性能优化：避免不必要的 Getter 计算，异步操作加防抖。

实际应用场景

场景 1：用户登录状态

用 Pinia 管理登录状态：

// stores/auth.js
import { defineStore } from 'pinia';export const useAuthStore = defineStore('auth', {state: () => ({isLoggedIn: false,user: null}),actions: {async login(credentials) {const response = await fetch('/api/login', { method: 'POST', body: JSON.stringify(credentials) });const data = await response.json();this.isLoggedIn = true;this.user = data.user;},logout() {this.isLoggedIn = false;this.user = null;}}
});

场景 2：实时计数器

用 Vuex 实现多人协作计数器：

// store/index.js
export default createStore({state: {teamCount: 0},mutations: {updateCount(state, value) {state.teamCount = value;}},actions: {async fetchCount({ commit }) {const response = await fetch('/api/count');const count = await response.json();commit('updateCount', count);}}
});