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>
转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>