16.2 Vuex中的一些核心概念 -TypeScript和Vue从入门到精通(五)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(五)

### 16.2 Vuex中的一些核心概念

在Vue.js应用开发中，随着应用复杂度的增加，组件间的状态管理成为了一个不可忽视的问题。Vuex作为一个专为Vue.js应用程序开发的状态管理模式库，通过集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本章节将深入探讨Vuex中的一些核心概念，帮助读者从基础到精通地理解和使用Vuex。

#### 16.2.1 State

**State（状态）**是Vuex中最基础的概念，它用于存储应用的状态。在Vuex中，所有的状态都是响应式的，当状态发生变化时，视图会自动更新以反映这些变化。State被定义在Vuex的store中，可以通过`this.$store.state`访问，但更推荐的方式是使用Vuex提供的`mapState`辅助函数将state映射到组件的computed属性中，以便组件能够响应式地获取状态。

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

// 组件中访问
computed: {
  // 使用对象展开运算符将`this.$store.state`中的某些state混入computed
  ...mapState(['count'])
}
```

#### 16.2.2 Getters

**Getters（获取器）**可以被认为是store中的计算属性。就像组件中的computed属性一样，getters依赖于state中的某些状态，并返回基于这些状态计算后的结果。与直接返回state不同，getters允许组件从store中派生一些状态，例如对列表进行过滤并返回一个新的数组，而不是修改原始数组。

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

// 组件中访问
computed: {
  ...mapGetters(['doneTodos'])
}
```

#### 16.2.3 Mutations

**Mutations（变更）**是Vuex中唯一允许更改应用状态的方法。由于Vuex的状态是响应式的，所以当你需要改变状态时，你应该通过提交mutation来实现。每个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是我们实际进行状态更新的地方。

重要的是，mutations必须是同步函数。这是为了确保每次状态变更后，我们都能得到一个新的状态快照，这样我们就能利用一些工具来帮助我们追踪状态的变化。

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

// 提交mutation
store.commit('increment');
```

#### 16.2.4 Actions

**Actions（动作）**类似于mutations，不同之处在于actions可以包含任意异步操作。由于mutations必须是同步的，所以当我们需要执行异步操作并更新状态时，可以通过actions来完成。Actions通过提交mutations来变更状态，而不是直接修改状态。

Actions可以接收一个与store实例具有相同方法和属性的context对象作为第一个参数，因此你可以通过`context.commit`来提交一个mutation，或者通过`context.state`和`context.getters`来访问state和getters。

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

// 分发action
store.dispatch('incrementIfOddOnRootSum', {
  amount: 1
});
```

#### 16.2.5 Modules

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

模块的状态是局部的，意味着模块内部的state、mutation、action和getter是默认注册的，并且只对其模块内部可见。如果希望在其他模块中访问当前模块的状态或方法，可以通过模块的命名空间（namespaced）选项来实现。

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

const moduleB = {
  namespaced: true,
  // ...
}

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

// 访问namespaced模块的状态
store.state.b.someLocalState
```

#### 16.2.6 总结

Vuex通过提供State、Getters、Mutations、Actions和Modules等核心概念，为Vue.js应用提供了一套高效、可预测的状态管理模式。State用于存储应用的状态，Getters用于派生状态，Mutations用于同步更新状态，Actions用于处理异步操作，而Modules则帮助我们将应用分割成模块，以便更好地管理。

理解和掌握这些核心概念对于开发大型Vue.js应用至关重要。它们不仅提高了应用的可维护性，还使得状态管理变得更加清晰和高效。通过本章节的学习，读者应该能够熟练地在Vue.js项目中使用Vuex进行状态管理，从而实现从入门到精通的跨越。

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

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

VUE组件基础与实战

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

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

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

移动端开发指南

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

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

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

Vue原理与源码解析

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

Vue源码完全解析