Vue Vuex（状态管理）

---

一、什么是 Vuex？

Vuex 是一个专为 Vue.js 应用设计的状态管理模式。它采用单向数据流的思想，将应用的所有状态存储在一个全局的 Store 中，并通过明确的规则来修改状态。

核心概念

1. State: 单一状态树，存储应用的全局状态。
2. Getter: 从 State 中派生数据，类似于 Vue 的计算属性。
3. Mutation: 修改 State 的唯一方法，必须是同步操作。
4. Action: 类似于 Mutation，但可以包含异步逻辑。
5. Module: 将状态、Mutation、Action 和 Getter 模块化，适用于大型应用。

---

二、安装和基础使用

安装 Vuex

通过 npm 或 yarn 安装：

npm install vuex

在 Vue 项目中引入：

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

Vue.use(Vuex);

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

new Vue({
  el: '#app',
  store,
});

---

三、核心概念详解

1. State

State 是 Vuex 中的核心，用于存储应用的全局状态。

使用方式

在组件中访问 State：

// 使用 this.$store.state
this.$store.state.count;

通过辅助函数 mapState 简化访问：

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
}

示例

const store = new Vuex.Store({
  state: {
    user: {
      name: 'Alice',
      age: 25,
    },
  },
});

---

2. Getter

Getter 是从 State 派生数据的方式，类似于 Vue 的计算属性。

定义 Getter

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false },
    ],
  },
  getters: {
    doneTodos: (state) => state.todos.filter((todo) => todo.done),
  },
});

在组件中使用 Getter：

this.$store.getters.doneTodos;

通过辅助函数 mapGetters：

import { mapGetters } from 'vuex';

computed: {
  ...mapGetters(['doneTodos']),
}

---

3. Mutation

Mutation 是唯一可以修改 State 的方式，且必须是同步操作。

定义 Mutation

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    incrementBy(state, payload) {
      state.count += payload.amount;
    },
  },
});

提交 Mutation

this.$store.commit('increment');
this.$store.commit('incrementBy', { amount: 10 });

---

4. Action

Action 是用于处理异步操作的模块，最终会触发 Mutation。

定义 Action

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    },
  },
});

分发 Action

this.$store.dispatch('asyncIncrement');

通过辅助函数 mapActions：

import { mapActions } from 'vuex';

methods: {
  ...mapActions(['asyncIncrement']),
}

---

5. Module

当应用变得复杂时，可以将 Vuex Store 按模块拆分。

定义模块

const moduleA = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
};

const moduleB = {
  state: () => ({ name: 'Bob' }),
};

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  },
});

访问模块的 State 和 Getter

store.state.a.count;
store.getters['a/doubleCount'];

---

四、持久化和插件

状态持久化

可以使用插件如 vuex-persistedstate，将 Vuex 的状态持久化到 LocalStorage 或 SessionStorage。

安装

npm install vuex-persistedstate

配置

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    user: null,
  },
  plugins: [createPersistedState()],
});

---

五、Vuex 与 Vue 组合

在 Vue 组件中，使用 Vuex 的方式非常灵活。

使用 $store

this.$store.state.propertyName;
this.$store.commit('mutationName');

使用辅助函数

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

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doneTodos']),
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['asyncIncrement']),
  },
};

---

六、Vuex 的优缺点

优点

1. 集中式管理: 所有状态存储在一个全局的 Store 中，便于追踪和调试。
2. 单向数据流: 数据流动方向清晰，易于维护。
3. 插件生态: 丰富的插件支持，如状态持久化、调试工具等。

缺点

1. 学习曲线: 相较于简单的 props 和事件通信，Vuex 的使用较为复杂。
2. 样板代码: 在小型项目中，Vuex 的样板代码可能显得繁琐。
3. 性能开销: 过于频繁地修改 State 可能带来性能问题。

---

七、Vuex 实战

以一个简单的购物车应用为例，展示 Vuex 的实际应用场景。

示例代码

定义 Store

const store = new Vuex.Store({
  state: {
    cart: [],
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    },
    removeFromCart(state, productId) {
      state.cart = state.cart.filter((item) => item.id !== productId);
    },
  },
  getters: {
    cartItemCount: (state) => state.cart.length,
  },
  actions: {
    asyncAddToCart(context, product) {
      setTimeout(() => {
        context.commit('addToCart', product);
      }, 500);
    },
  },
});

在组件中使用

<template>
  <div>
    <button @click="addToCart({ id: 1, name: 'Product A' })">添加到购物车</button>
    <p>购物车中商品数量: {{ cartItemCount }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['cartItemCount']),
  },
  methods: {
    ...mapActions(['asyncAddToCart']),
  },
};
</script>

---

八、总结

Vuex 是 Vue 应用中状态管理的强大工具，但它并非总是必需的。在简单应用中，可以使用 Vue 3 的 Composition API 或 Pinia 替代 Vuex。在需要复杂状态管理时，Vuex 的模块化、插件支持和调试工具将成为开发者的得力助手。

通过合理规划 State 和 Mutation，以及充分利用 Vuex 的插件生态，你可以构建功能强大且易维护的应用程序。