辅助函数

作用：在组件中调用 Vuex 的数据或方法，使其更加便捷。

辅助函数总共有 4 个，即 mapState、mapGetters、mapMutations、mapActions。

mapState辅助函数

第一个辅助函数 mapState，其作用是处理 state 中的数据，代码如下。

<template>
  <div class="hello">
    <h1>mapState 辅助函数：{{ num }}</h1>
  </div>
</template>

<script>
// 1. 引入 mapState 辅助函数
import { mapState } from 'vuex';

export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  // 2. 在 computed 计算属性中使用辅助函数
  computed: {
    // 3. num 就是 state 中定义的数据
    ...mapState(['num'])
  },
  methods: {}
};
</script>

代码解析如下。

mapState 辅助函数需要在 computed 计算属性中使用。

使用辅助函数前后的调用对比如下。

使用之前：<h1>{{$store.state.num}}</h1>。

使用之后：<h1>{{num}}</h1>。

mapGetters辅助函数

mapGetters 辅助函数是将 store 中的 getters 映射到组件计算属性中，其作用是可以在组件中更加便捷地使用 getters 对象中的属性，下述代码是在组件中使用 mapGetters 辅助函数。

<template>
  <div class="hello">
    //4．直接使用插值表达式，使用getters中的数据
    <h1>mapGetters 辅助函数：{{ newnum }}</h1>
    <h1>mapState 辅助函数：{{ num }}</h1>
  </div>
</template>

<script>
// 1. 引入 mapGetters 辅助函数
import { mapState, mapGetters } from 'vuex';

export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  // 2. 在 computed 计算属性中使用辅助函数
  computed: {
    // 3. newnum 就是 getters 中定义的数据
    ...mapState(['num']),
    ...mapGetters(['newnum'])
  }
};
</script>

代码解析如下。

mapGetters 的作用是处理 getters 属性中的数据，其使用方法和 mapState 辅助函数一样，也是在 computed 计算属性中使用。

mapMutations辅助函数

mapMutations 辅助函数的作用是把 store 中 mutation 内的方法映射到组件 methods 属性中，可以在组件中直接使用 mutation 里面的方法，下述代码是在组件中使用 mapMutations 辅助函数。

<template>
  <div class="hello">
    <h1>mapGetters 辅助函数：{{ newnum }}</h1>
    <h1>mapState 辅助函数：{{ num }}</h1>
    <input type="text" :value="$store.state.num" />
    <input type="button" value="+1" @click="addnum" />
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    ...mapState(['num']),
    ...mapGetters(['newnum'])
  },
  methods: {
    ...mapMutations(['getAdd']),
    addnum() {
      this.getAdd();
    }
  }
};
</script>

代码解析如下。

mapMutations 辅助函数和 mapState 辅助函数、mapGetters 辅助函数不一样，它是在 methods 属性中使用的。

mapActions辅助函数

mapActions 辅助函数的作用是把 store 中 actions 内的方法映射到组件 methods 属性中，可以在组件中直接使用 actions 里面的方法，下述代码是在组件中使用 mapActions 辅助函数。

<template>
  <div class="hello">
    <h1>mapGetters 辅助函数：{{ newnum }}</h1>
    <h1>mapState 辅助函数：{{ num }}</h1>
    <input type="text" :value="$store.state.num" />
    //3．绑定单击事件
    <input type="button" value="+1" @click="addnum" />
  </div>
</template>

<script>
//1．引入mapActions辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    ...mapState(["num"]),
    ...mapGetters(["newnum"])
  },
  methods: {
    //2．在methods中使用mapActions
    ...mapMutations(["getAdd"]),
    ...mapActions(["getAddActions"]),
    addnum() {
      //4．直接使用mapMutations结构的方法
      this.getAddActions();
    }
  }
};
</script>

总结：从分类来看，这 4 个辅助函数可以归为两大类，mapState 和 mapGetters 属于一类，它们在 computed 计算属性中使用。mapMutations 和 mapActions 属于另一类，它们在 methods 属性中使用。