Vue学习笔记61--mapActions + mapMutations

原始实现

 

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

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

export default {
  name: 'Count3',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    // totalSum () { return this.$store.state.sum },
    // totalSum ()、 mySchool ()、 mySubject () 等价于以下代码
    // 写法一：对象写法，借助mapState生成计算属性，从state中读取数据
    // ...mapState({ totalSum: 'sum', mySchool: 'school', mySubject: 'subject' }),

    // 写法二：数组写法，借助mapState生成计算属性，从state中读取数据
    ...mapState(['sum', 'school', 'subject']),

    // 等价于  bigSum () {      return this.$store.getters.bigSum    },
    // 借助mapGetters生成计算属性，从getters中读取数据
    // ...mapGetters(['bigSum']),//数组写法
    ...mapGetters({ bigSum: 'bigSum' }),//对象写法


  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {
    // mutations
    increment () {
      // this.$store.dispatch('increment', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Increment', this.selectNo)
    },
    decrement () {
      // this.$store.dispatch('decrement', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Decrement', this.selectNo)
    },


    // actions
    incrementOdd () {
      this.$store.dispatch('incrementOdd', this.selectNo)
    },
    incrementWait () {
      this.$store.dispatch('incrementWait', this.selectNo)
    },
  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

 

mapActions  + mapMutations

 

 注：

1. mapActions与mapMutations使用时，如果需要传递参数，则需要在模版中绑定事件时传递入参，否则参数默认是event事件对象
2. ...mapMutations数组写法(使用时--使用组件中的方法命名必须和mutations中的一致)，mutations中的方法一般建议使用首字母大写

示例一：

<template>
  <div>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>当前求和为：{{ sum }}</h3>
    <h3>我在：{{ school }}，学习:{{subject }}</h3>
    请选择数量：<select v-model.number="selectNo">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select><br>

    <button @click="increment(selectNo)">mutation对象方式+</button>
    <button @click="decrement(selectNo)">mutation对象方式-</button> <br>

    <hr>
    <h3 style="color: brown">...mapMutations数组写法(使用时--使用组件中的方法命名必须和mutations中的一致)</h3>
    <button @click="Increment(selectNo)">mutation 数组方式+</button>
       <button @click="Decrement(selectNo)">mutation 数组方式-</button><br>

    <button @click="incrementOdd(selectNo)">当前为奇数再加</button>
    <button @click="incrementWait(selectNo)">等一下再加</button>
  </div>
</template>

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

export default {
  name: 'Count3',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    // totalSum () { return this.$store.state.sum },
    // totalSum ()、 mySchool ()、 mySubject () 等价于以下代码
    // 写法一：对象写法，借助mapState生成计算属性，从state中读取数据
    // ...mapState({ totalSum: 'sum', mySchool: 'school', mySubject: 'subject' }),

    // 写法二：数组写法，借助mapState生成计算属性，从state中读取数据
    ...mapState(['sum', 'school', 'subject']),

    // 等价于  bigSum () {      return this.$store.getters.bigSum    },
    // 借助mapGetters生成计算属性，从getters中读取数据
    // ...mapGetters(['bigSum']),//数组写法
    ...mapGetters({ bigSum: 'bigSum' }),//对象写法

  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {

    /*  可使用...mapMutations代替如下代码
     // mutations
     increment () {
       // this.$store.dispatch('increment', this.selectNo)
       // 如果没有业务路基处理，可直接使用mutations中对应的方法
       this.$store.commit('Increment', this.selectNo)
     },
     decrement () {
       // this.$store.dispatch('decrement', this.selectNo)
       // 如果没有业务路基处理，可直接使用mutations中对应的方法
       this.$store.commit('Decrement', this.selectNo)
     }, */

    //  借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
    ...mapMutations({ increment: 'Increment', decrement: 'Decrement' }), //对象写法
    ...mapMutations(['Increment', 'Decrement']), //数组写法(数组写法使用时，使用组件中的方法命名必须和mutations中的一致)


    /*  actions
     ...mapActions 可替代如下代码
     incrementOdd () {
       this.$store.dispatch('incrementOdd', this.selectNo)
     },
     incrementWait () {
       this.$store.dispatch('incrementWait', this.selectNo)
     }, */

    //  借助mapActions生成对应的方法，方法中会调用dispatch去联系actions
    // ...mapActions({ incrementOdd: 'incrementOdd', incrementWait: 'incrementWait' }), //对象写法
    ...mapActions(['incrementOdd', 'incrementWait']), //数组写法

  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>