🎯 引言

学会这篇文章，你将能够在 Vue2 项目里轻松集成并使用 Vuex 来进行状态管理。掌握 Vuex 的核心概念 State 和 Mutation，避免常见的误区，提升你的项目代码规范性和可维护性。让状态管理不再难懂，开发体验更顺畅。

🏷️ 什么是 State

State 就是 Vuex 里存储应用级状态的地方。

它是响应式的，即它的变化能自动驱动依赖它的组件重新渲染。

你可以把它想象成一个全局的数据仓库，任何组件需要共享的数据都可以放到 state 里管理。

平时你在普通组件里用 data 声明的状态，只能组件内部用，跨组件共享就挺麻烦的。Vuex 的 state 就专门解决这个问题。

🔧 什么是 Mutation？

Mutation 是用来修改 state 的唯一官方方式。

它是同步函数，保证状态变化是可追踪的。

你需要通过调用 commit 方法来触发 mutation。

这样做的好处是，你可以通过 Vue Devtools 跟踪每一次状态变化，方便调试。

🚀 如何在 Vue2 项目中使用 Vuex

Vuex 是官方推荐的 Vue 应用状态管理工具，适合中大型项目统一管理组件间共享的数据。下面我们用 Vue2 来演示怎么安装、配置和基本使用 Vuex。

安装和配置 Vuex（以 Vue2 为例）

首先，确保你有一个 Vue2 项目环境。然后通过 npm 安装 Vuex。

npm install vuex@3 --save

安装完毕后，在主入口文件（通常是 main.js）中引入并注册 Vuex。

import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';

Vue.use(Vuex);

const store = new Vuex.Store({
    // 这里后面继续讲
});

new Vue({
    el: '#app',
    store, // 注入 store
    render: h => h(App),
});

创建 store 和 state

store 是 Vuex 的核心实例，里面包含了全局的 state，mutations，actions 等。

我们在创建 store 时，需要定义 state。就是存放共享数据的地方。

const store = new Vuex.Store({
    state: {
        count: 0,
        isLoggedIn: false,
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        login(state) {
            state.isLoggedIn = true;
        },
    },
});

这里我们定义了两个状态变量和对应的修改方法（mutation）。

组件中读取 state

我们可以通过 this.$store.state 在任何组件中访问状态。

<template>
    <div>
        <p>当前计数：{{ count }}</p>
        <p>登录状态：{{ isLoggedIn }}</p>
    </div>
</template>

<script>
export default {
    computed: {
        count() {
            return this.$store.state.count;
        },
        isLoggedIn() {
            return this.$store.state.isLoggedIn;
        },
    },
};
</script>

这样组件就可以响应 state 变化自动更新视图。

用 commit 调用 mutation 修改数据

修改 state 必须走 mutation，不能直接赋值。

<template>
    <div>
        <button @click="incrementCount">增加计数</button>
        <button @click="loginUser">登录</button>
    </div>
</template>

<script>
export default {
    methods: {
        incrementCount() {
            this.$store.commit('increment');
        },
        loginUser() {
            this.$store.commit('login');
        },
    },
};
</script>

⚠️ 常见坑 & 小技巧（轻松科普）

千万不要直接修改 state，必须使用 mutation 来修改，确保状态变化可追踪。比如这样写是错误的：

this.$store.state.isLoggedIn = true;

Vue Devtools 是观察 Vuex 状态变化的好帮手，可以实时看到 mutation 调用和 state 更新，非常方便。

🧾 小节总结

• Vuex 是 Vue2 推荐的状态管理工具，安装时指定版本 3.x。
• State 是响应式的全局共享状态，Mutation 是同步修改 state 的唯一手段。
• 不能直接修改 state，必须用 commit 调用 mutation，异步操作放 actions。

❓ 知识问答（Q&A）

Q：Vuex 的 state 是在组件的 data 里定义的吗？

A：不是，state 是 Vuex store 里面定义的全局状态，组件通过 this.$store.state 来访问。

Q：为什么不能直接修改 state？

A：直接改会导致状态变化不可追踪，Vuex 设计 mutation 来保证状态修改的可预测和可调试性。

Q：异步操作怎么处理？

A：异步操作放在 actions 里，actions 可以调用 mutation 来同步修改 state。

🧪 小练习

练习1

在 Vue2 项目中创建一个 Vuex store，定义一个 todos 数组状态，写一个 mutation 用来添加新任务。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        todos: [],
    },
    mutations: {
        addTodo(state, todo) {
            state.todos.push(todo);
        },
    },
});

<template>
    <div>
        <ul>
            <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
        </ul>
        <button @click="addNewTodo">添加任务</button>
    </div>
</template>

<script>
export default {
    computed: {
        todos() {
            // 在这里编写你的代码
        },
    },
    methods: {
        addNewTodo() {
            // 在这里编写你的代码
        },
    },
};
</script>

🎉 恭喜你已经掌握 Vuex 的安装配置、State 管理、Mutation 调用和常见坑的技能啦！通过这些基础内容，你可以开始利用 Vuex 管理 Vue2 项目的复杂状态，使代码更规范易维护。祝你前端路上越走越顺！