18.2 Vuex的组成-Vue.js从入门到精通(四)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(四)

### 18.2 Vuex的组成

在Vue.js的生态系统中，Vuex作为状态管理模式和库，扮演着核心的角色，尤其是在构建大型单页面应用（SPA）时。它帮助开发者以一种集中、可预测的方式来管理应用的状态。Vuex的组成结构清晰，主要包括State、Getters、Mutations、Actions和Modules几个核心部分。本章节将深入解析Vuex的这些组成要素，帮助读者从理论到实践全面掌握Vuex。

#### 18.2.1 State

**State** 是Vuex中最基本的概念，它等同于组件中的`data`。Vuex使用单一状态树（Single State Tree）来管理应用的所有状态，这意味着你的应用的状态是集中存储在同一个对象中的。这样做的好处是，任何组件都能通过访问这个单一的状态树来获取到应用的状态，使得状态管理变得清晰和可预测。

**示例代码**：

```javascript
const store = new Vuex.Store({
  state: {
    count: 0
  }
});
```

在上面的例子中，`state`对象包含了一个名为`count`的状态。任何组件都可以通过`this.$store.state.count`来访问这个状态。

#### 18.2.2 Getters

**Getters** 类似于Vue组件中的计算属性（computed properties）。它们允许你从state中派生出一些状态，就像计算属性基于它们的依赖进行缓存一样，Getters的返回值也会根据它们的依赖被缓存起来，且只有当依赖发生改变时才会重新计算。

**示例代码**：

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

在这个例子中，`doneTodos`是一个Getter，它基于`todos`状态计算得出所有已完成的任务列表。你可以通过`this.$store.getters.doneTodos`来访问这个派生的状态。

#### 18.2.3 Mutations

**Mutations** 是Vuex中改变状态的唯一方法。它们必须是同步函数，这意味着你不能在Mutations中执行异步操作。这个限制确保了每次状态变化都是可跟踪和可预测的。

**示例代码**：

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

在组件中，你可以通过`this.$store.commit('increment')`来触发`increment`这个mutation，从而改变`count`的值。

#### 18.2.4 Actions

**Actions** 类似于mutations，不同之处在于：

1. **异步操作**：Actions可以包含任意异步操作。
2. **提交Mutation**：Actions通过提交mutation来间接改变状态，而不是直接修改状态。

**示例代码**：

```javascript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOddOnRootSum ({ commit, state }, payload) {
      if ((state.count + payload.amount) % 2 === 1) {
        commit('increment');
      }
    }
  }
});
```

在上面的例子中，`incrementIfOddOnRootSum`是一个action，它首先检查`count`与传入的`amount`之和是否为奇数，如果是，则提交`increment`这个mutation。

在组件中，你可以通过`this.$store.dispatch('incrementIfOddOnRootSum', { amount: 10 })`来触发这个action。

#### 18.2.5 Modules

**Modules** 是将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter，甚至是嵌套子模块——从上至下进行同样方式的分割。这使得Vuex的应用结构更加模块化，便于管理和维护。

**示例代码**：

```javascript
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

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

在这个例子中，`moduleA`和`moduleB`是两个独立的模块，它们分别维护自己的状态、mutations、actions和getters。通过在store中定义`modules`属性，我们可以将这些模块整合到一个store中。

#### 总结

Vuex的组成结构清晰且强大，通过State、Getters、Mutations、Actions和Modules这几个核心部分，它提供了一种高效、可预测的状态管理模式。State作为单一状态树存储了应用的所有状态；Getters允许你从state中派生出一些状态；Mutations是同步函数，用于改变状态；Actions包含任意异步操作，并通过提交mutation来间接改变状态；Modules则帮助我们将store分割成模块，以便于管理和维护。

理解并掌握Vuex的这些组成要素，对于开发大型、复杂的Vue.js应用至关重要。通过合理使用Vuex，你可以构建出结构清晰、易于维护的应用，提升开发效率和应用性能。

该分类下的相关小册推荐：

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(五)

Vue3技术解密

vue项目构建基础入门与实战

VUE组件基础与实战

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(三)

移动端开发指南

TypeScript和Vue从入门到精通(一)

Vue面试指南

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(一)