冇事来学系--Vue2.0中vuex（下）-CSDN博客

本文链接：https://blog.csdn.net/GTWZeus/article/details/132971084

theme: Chinese-red

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」

恭祝各位xdm，虎年快乐～工资翻倍！

配置getters对象

``` // 与state平级，配置getters对象 const getters = { bigSum(state){ // getters对象里设置一个处理函数，state作为形参 return state.sum*10 // 通过return返回处理后的数据 } }

// 在组件中通过vc上的$store中的getters对象，可以获取到处理后的数据 // $store.getters.bigSum就是上面处理后的数据 ```

vuex中的mapState与mapGetters

一个问题：在模板中使用这些数据的时候，都要从vc上的$store中的state或者getters中获取，所以模板中会出现大量$store.state，我们可以通过计算属性computed来解决

```js {{$store.state.sum}} {{$store.state.school}} {{$store.state.student}}

// 用计算属性将上面的代码简化 computed: { sum(){ return $store.state.sum }, school(){ return $store.state.school }, student(){ return $store.state.student } }

// 这样模板中就可以写的简单一些 {{sum}} {{school}} {{student}} ```

但是，在计算属性computed节点中也很繁琐，这里就可以采用mapState对计算属性进行简化了

mapState方法：用于帮助我们映射state中的数据为计算属性

// 知识回顾---扩展运算符 // 扩展运算符就是在数组/对象的前面加三个点，相当于把数组/对象拆分成了以逗号分隔的参数序列 let obj = {x: 100, y: 200} let obj1 = { a: 1, ...obj, b: 2 } // 上面的代码中，会将obj的一组组key: value拆出来放到obj1中

使用mapState方法

```js

```

mapGetters与mapState的使用方法一致

Vuex中的mapActions与mapMutations

与mapState类似，mapMutations是对methods节点内方法的简写

mapMutations用于生成methods节点中的方法，生成的方法中会自动调用commit，提交处理函数到mutations对象

```js

```

mapActions的用法与mapMutations的用法一致

使用mapActions生成methods节点中的方法，生成的方法会自动调用dispatch，派遣处理函数到actions对象

```js methods: {

incrementOdd(){
this.$store.dispatch('incrementOdd',this.number)
},
incrementWait(){
this.$store.dispatch('incrementWait',this.number)  
},

...mapActions({incrementOdd: 'incrementOdd', incrementWait: 'incrementWait'})

// 使用mapAcions生成methods节点中的方法(数组写法)

// 当methods节点下注册的方法名和dispatch派遣给actions对象的方法名一致时，可以用数组简写 ...mapActions(['increment', 'decrement']) }

// 同理，在绑定事件的时候得把参数写上，因为mapActions生成methods方法时没有传递this.number ```