Vue 2.x – 四个map生成方法的使用

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

   computed: {
      //借助mapState生成计算属性：sum、school、subject（对象写法）
       ...mapState({sum:'sum',school:'school',subject:'subject'}),
   
      //借助mapState生成计算属性：sum、school、subject（数组写法）
      ...mapState(['sum','school','subject']),
   },

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
      //借助mapGetters生成计算属性：bigSum（对象写法）
      ...mapGetters({bigSum:'bigSum'}),
   
      //借助mapGetters生成计算属性：bigSum（数组写法）
      ...mapGetters(['bigSum'])
   },

3. mapActions方法：用于帮助我们生成与actions`对话的方法，即：包含`$store.dispatch(xxx)的函数

   methods:{
      //靠mapActions生成：incrementOdd、incrementWait（对象形式）
      ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
      //靠mapActions生成：incrementOdd、incrementWait（数组形式）
      ...mapActions(['jiaOdd','jiaWait'])
   }

4. mapMutations方法：用于帮助我们生成与mutations`对话的方法，即：包含`$store.commit(xxx)的函数

   methods:{
      //靠mapActions生成：increment、decrement（对象形式）
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),
   
      //靠mapMutations生成：JIA、JIAN（对象形式）
      ...mapMutations(['JIA','JIAN']),
   }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

代码

<template>
  <div>
    <h3>当前求和为：{{ sum }}</h3>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <select v-model.number="nummber">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(nummber)">+</button>
    <button @click="decrement(nummber)">-</button>
    <button @click="incrementOdd(nummber)">当前求和为奇数再加</button>
    <button @click="incrementWait(nummber)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      nummber: 1,
    };
  },
  methods: {
    // increment() {
    //   // 直接用mutations
    //   this.$store.commit("JIA", this.nummber);
    // },
    // decrement() {
    //   this.$store.commit("JIAN", this.nummber);
    // },
    // 借助mapMuttations生成的方法，调用commit,对象写法
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),

    // incrementOdd() {
    //   this.$store.dispatch("jiaOdd", this.nummber);
    // },
    // incrementWait() {
    //   this.$store.dispatch("jiaWait", this.nummber);
    // },
    // 借助mapActions生成的方法，调用dispatch,对象写法
    ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
  },
  computed: {
    // 自己去写计算属性
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },

    // 借助mapState生成的计算属性，从state中读取数据-对象写法
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    // 借助mapState生成的计算属性，从state中读取数据-数组写法
    ...mapState(["sum", "school", "subject"]),
    // 借助mapGetters生成的计算属性，从getters中读取数据-数组写法
    ...mapGetters(["bigSum"]),
  },
};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>