Vuex的mapState和mapMutations是什么？

(一) mapState

使用仓库数据有两种方法，

❶ 通过 store 直接访问：

先在computed属性里面手动配置对应的方法，

然后在页面调用{{ $store.state.属性名 }}。

❷ 通过mapState辅助函数：

使用步骤如下：

1）导入mapState：import { mapState } from 'vuex'

2）数组方式引入state：mapState( [ '属性名1'，'属性名2' ] )

注：这里mapState([ '属性名' ])得到的是一个对象。

3）展开运算符映射：computed：{

…mapState( [ '属性名1'，'属性名2' ] )  

}

注：这里的computed计算属性不采用直接赋值，也就是等于mapState(['属性名'])，而采用展开运算符，是为了不让一个mapState辅助函数就把computed配置项占满了，导致后面其他的计算属性配不了。

如此一来，computed属性里面就不用再手动配置方法，直接调用mapState辅助函数就可以了；页面也不用再写完整的{{ $store.state.属性名 }}，直接使用 {{ 属性名 }} 就可以，整体简化了代码。

而辅助函数mapState的底层逻辑是，帮忙自动生成了对应的computed计算属性，并通过展开运算符的方式直接在computed里面进行映射，所以页面就可以直接使用了。

(二) mapMutations

1. mapMutations是把mutations中的方法提取了出来，映射到组件methods中。

2. 使用步骤：

1) 和mapState一起从vuex中导入：

import { mapState，mapMutations } from 'vuex'

2) 在使用组件的methods中映射：

methods：{

…mapMutations( [ 'mutations里面注册的方法名' ] ) ，

当前组件事件的方法名(参数){

     this.mutations里面注册的方法名(参数)

     }

}

两者的区别是，mapState 用于自动映射仓库里面的数据，mapMutations 用于映射仓库里面的方法。