vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

Vuex中的四大金刚——State、Mutations、Actions、Getters，各自扮演着重要的角色，共同构成了Vuex状态管理系统的核心。本文将重点介绍如何使用mapState、mapGetters、mapActions和mapMutations来更好地管理和操作Vuex的状态。

一、四大金刚简介

在Vuex中，State作为存储数据的仓库，用于存储应用的全局状态；Mutations用于更改状态，是唯一的修改State的方式；Actions用于处理异步操作，可以提交Mutations来改变状态；Getters则用于从Store中获取数据，可以看作是Store的计算属性。

二、使用mapState、mapGetters、mapActions和mapMutations

1. mapState

当组件需要读取State中的数据时，可以使用mapState辅助函数。通过映射State中的属性，可以在组件中直接使用这些属性，无需每次都通过this.$store.state获取。例如：

```javascript

import { mapState } from 'vuex'

export default {

computed: mapState({

blogTitle: state => state.blogTitle,

todos: state => state.todos

})

}

```

2. mapGetters

当组件需要使用Getters派生的状态时，可以使用mapGetters辅助函数。这样可以将Getters映射到组件的计算属性中。例如：

```javascript

import { mapGetters } from 'vuex'

export default {

computed: mapGetters([

'getterName' // 映射一个getter到局部计算属性

])

}

```

3. mapMutations

当组件需要提交Mutations改变状态时，可以使用mapMutations辅助函数。这样可以将提交Mutation的方法映射到组件的方法中，方便调用。例如：

```javascript

import { mapMutations } from 'vuex'

export default {

methods: mapMutations({

一、简化状态数据操作

无需深入理解状态树上的复杂数据，我们可通过简化操作来轻松使用。组件中的state.todos是一个对象，在挑选不同数据时需要进行处理。为减少每次操作的复杂性，我们可以在getter中处理这些数据，然后导出一个方法以供使用。

二、创建Getter

我们创建一个getters对象，其中包含一个名为getToDo的getter。这个getter会过滤出state.todos中所有done属性为true的项，返回一个数组。这样，我们就可以在组件中直接使用这个数组，无需对原始数据进行复杂处理。

三、实际应用

1. 在项目（使用vue-cli脚手架）的src文件夹下，新建一个store文件夹，并在其中创建一个index.js文件。将上述代码，包括state、actions、mutations和getters的内容，填入此文件。

2. 在main.js文件中导入这个store。这是状态管理的核心文件，确保我们的vue实例能够访问到状态管理模块。

3. 在组件中使用。我们先提供一个组件的代码示例，然后在解释如何使用mapState、mapGetters、mapActions和mapMutations这些辅助函数来简化代码并优化状态管理。

组件代码示例：