第7篇：Vue 状态管理与 Vuex

在前面的章节中，我们学习了 Vue 路由的使用。然而，随着应用规模的增大，组件之间的数据共享和状态管理变得复杂。Vue 提供了一个状态管理库 —— Vuex，用来集中管理应用中的状态。

1. 什么是 Vuex？

Vuex 是 Vue 官方提供的状态管理模式，适合用于中大型单页面应用 (SPA)。它将共享的数据集中管理，并使状态变更可追踪和可维护。

Vuex 的核心概念：

• State： 存储应用的状态数据。
• Getters： 类似于计算属性，用于获取 state 中的值。
• Mutations： 修改 state 的唯一方式，必须是同步的。
• Actions： 用于提交 mutations，可以包含异步操作。
• Modules： 将状态拆分为多个模块，便于管理。

2. 安装 Vuex

在 Vue 3 项目中，使用以下命令安装 Vuex：

npm install vuex@next --save

3. 创建 Vuex Store

在 src 目录下新建一个 store 文件夹，并创建 index.js 文件。

示例：基础的 Vuex Store

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

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

解释：

• state：定义了一个 count 状态。
• mutations：定义了同步修改状态的方法。
• actions：通过异步操作调用 mutations。
• getters：类似计算属性，返回处理后的状态。

4. 在项目中使用 Vuex

将创建的 store 引入到 main.js 中：

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

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

示例：在组件中使用 Vuex 状态

在 App.vue 中添加按钮来操作 Vuex 中的状态：

<template>
  <div>
    <h1>Vuex 状态管理示例</h1>
    <p>当前计数：{{ count }}</p>
    <p>双倍计数：{{ doubleCount }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="incrementAsync">异步增加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['incrementAsync'])
  }
};
</script>

<style scoped>
button {
  margin: 5px;
  padding: 5px 10px;
}
</style>

解释：

• mapState 和 mapGetters：将 Vuex 的 state 和 getters 映射到组件的 computed 属性中。
• mapMutations 和 mapActions：将 mutations 和 actions 映射到组件的方法中。

5. 模块化 Vuex

当项目状态较多时，可以将 Vuex 拆分为多个模块。

示例：模块化配置

// src/store/modules/counter.js
const state = () => ({
  count: 0
});

const mutations = {
  increment(state) {
    state.count++;
  }
};

const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => commit('increment'), 1000);
  }
};

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

export default { state, mutations, actions, getters };

在 store/index.js 中引入模块：

// src/store/index.js
import { createStore } from 'vuex';
import counter from './modules/counter';

export default createStore({
  modules: {
    counter
  }
});

6. 总结

在本篇中，你学习了：

• 什么是 Vuex 及其核心概念。
• 如何安装和配置 Vuex。
• 如何使用 state、mutations、actions 和 getters。
• 如何将 Vuex 状态映射到组件。
• 如何实现模块化管理 Vuex 状态。

下一篇中，我们将学习 Vue 中的网络请求与 Axios 的使用。