18.4 在项目中使用Vuex-Vue.js从入门到精通(四)

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

### 18.4 在项目中使用Vuex

在Vue.js应用的开发中，随着应用复杂度的增加，组件间的状态管理变得尤为重要。Vuex作为Vue.js官方推荐的状态管理模式和库，能够集中管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本章将深入介绍如何在Vue.js项目中引入、配置和使用Vuex，以实现高效、可维护的状态管理。

#### 18.4.1 理解Vuex核心概念

在深入探讨Vuex在项目中的具体应用之前，我们先来回顾一下Vuex的几个核心概念：

- **State**：Vuex使用单一状态树（Single Source of Truth）来管理应用的所有状态。这意味着应用的每个组件都从同一个地方获取状态，也更新到同一个地方。
- **Getters**：类似于组件的计算属性，getters允许你从store中派生出一些状态，例如，你可能需要对列表进行过滤并计数。
- **Mutations**：更改Vuex的store中的状态的唯一方法是提交mutation。Mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更新的地方，并且它会接受state作为第一个参数。
- **Actions**：Action类似于mutation，不同在于Action提交的是mutation，而不是直接变更状态。Action可以包含任意异步操作。
- **Modules**：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。为了解决这个问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

#### 18.4.2 安装与配置Vuex

要在Vue.js项目中引入Vuex，首先需要安装它。如果你使用的是npm或yarn作为包管理工具，可以通过以下命令安装Vuex：

```bash
npm install vuex@next --save  # Vue 3
# 或者
npm install vuex --save      # Vue 2

# 使用yarn
yarn add vuex@next           # Vue 3
# 或者
yarn add vuex                # Vue 2
```

安装完成后，在你的Vue项目中配置Vuex。以Vue 3为例，通常在`main.js`或`main.ts`文件中进行配置：

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { createStore } from 'vuex'

// 定义store
const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
  // 可以继续添加actions, getters等
})

// 创建Vue应用
const app = createApp(App)

// 使用store
app.use(store)

// 挂载应用
app.mount('#app')
```

对于Vue 2，配置方式略有不同，主要通过`new Vuex.Store({...})`来创建store实例，并通过`new Vue({...})`的`store`选项传入。

#### 18.4.3 在组件中使用Vuex

一旦Vuex被正确配置并引入Vue应用，你就可以在组件中通过`this.$store`访问store了。但是，直接通过`this.$store`来访问状态并不是Vuex推荐的做法，因为这会使得组件和状态管理之间耦合度增加，难以维护和测试。Vuex提供了几种更好的方式来在组件中使用store的状态和逻辑。

**使用`computed`属性映射State**

组件可以通过计算属性来映射store中的状态，这样当状态发生变化时，计算属性会自动更新，并且组件也会重新渲染。

```vue
<template>
  <div>{{ count }}</div>
</template>

为了更优雅地处理，可以使用Vuex提供的`mapState`辅助函数：

```vue
<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}
</script>
```

**提交Mutations**

修改store中的状态需要通过提交mutations来完成。在组件中，你可以使用`this.$store.commit('mutationType', payload)`来提交mutation。同样，Vuex提供了`mapMutations`辅助函数来简化这一过程。

```vue
<template>
  <button @click="increment">Increment</button>
</template>

export default {
  methods: {
    ...mapMutations(['increment']),
    // 或者直接使用
    // increment() {
    //   this.$store.commit('increment');
    // }
  }
}
</script>
```

**分发Actions**

Actions用于处理异步操作，并通过提交mutations来间接更新状态。在组件中分发actions，可以通过`this.$store.dispatch('actionType', payload)`来实现。Vuex也提供了`mapActions`辅助函数来简化这一过程。

```vue
<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['fetchData']),
    // 或者直接使用
    // fetchData() {
    //   this.$store.dispatch('fetchData');
    // }
  }
}
</script>
```

**使用Getters**

Getters允许组件从Store中派生出一些状态。它们可以被认为是store的计算属性。使用getters的方式与state类似，可以通过`this.$store.getters.getterName`来访问，或者使用`mapGetters`辅助函数。

```vue
<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 使用对象展开运算符将getter混入computed属性中
    ...mapGetters(['doneTodosCount'])
  }
}
</script>
```

#### 18.4.4 Vuex模块化

随着应用规模的扩大，将所有状态管理逻辑放在一个大的store对象中可能会变得难以维护。Vuex允许我们将store分割成模块（module），每个模块拥有自己的state、mutations、actions、getters等。模块化的store使得每个模块都保持相对独立，易于理解和维护。

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

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
```

在模块化模式下，组件可以通过`this.$store.state.moduleName.stateName`、`this.$store.commit('moduleName/mutationName', payload)`、`this.$store.dispatch('moduleName/actionName', payload)`以及`this.$store.getters['moduleName/getterName']`等方式来访问和操作不同模块的状态和逻辑。

#### 18.4.5 小结

Vuex是Vue.js应用中状态管理的强大工具，它通过集中管理所有组件的状态，并以可预测的方式更新状态，极大地提高了应用的可维护性和可扩展性。本章详细介绍了Vuex的核心概念、如何在Vue项目中安装和配置Vuex、如何在组件中高效地使用Vuex的state、mutations、actions和getters，以及如何通过模块化来组织复杂的store。掌握了这些内容，你将能够在Vue.js项目中更加灵活地应用Vuex，构建出高效、可维护的Vue应用。

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

移动端开发指南

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

Vue面试指南

Vue原理与源码解析

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

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

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

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

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

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

Vue3技术解密

Vue源码完全解析