Vuex 的语法糖 (mapState mapGetters mapMutations mapActions)

一. 原始使用vuex

在基础写法中，如果一个页面上使用多个store中的数据，这样写就感觉太繁琐了，每次都要this.$store.state.xxx。或者是多次调用store中的方法，也是 this.$store.commit(方法名, 传参);

1.1 使用vuex中的数据

this.$store.state.num

1.1 使用vuex中的方法

this.$store.commit(方法名, 传参);

二. vuex语法糖

 2.1 mapState 辅助函数

// 使用
<div>{{ name }}</div>


import { mapState } from 'vuex';

export default {
  // 映射哪些store中的字段就填入哪些字段
  // computed: mapState(['name','age','gender'])
  computed: {
      ...mapState(['name','age','gender'])
  }
  
}

2.2 getters

getters相当于vue中的计算属性，通过getters进一步处理，得到我们想要的值，而且允许传参，第一个参数就是state

import { mapGetters } from 'vuex';

export default {
  // 映射哪些store中的getters方法就填入哪些方法
  computed: {
      ...mapGetters(['getterUpdateName'])
  }
  
}

2.3 mapMutations 同步操作

<button @click="addAge(5)">测试</button>

import { mapMutations } from 'vuex';
methods:{
     // 映射vuex中定义的mutations中的方法
     ...mapMutations(['addAge'])
}

2.4 mapActions 异步操作

<button @click="addAge(5)">测试</button>

import { mapActions } from 'vuex';
methods:{
     // 映射vuex中定义的mapActions中的方法
     ...mapActions(['getUserInfo'])
}