[JavaScript知识库] vuex的辅助函数：mapActions和mapMutations

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vuex的辅助函数：mapActions和mapMutations -> 正文阅读

[JavaScript知识库]vuex的辅助函数：mapActions和mapMutations

文章目录

- - - mapActions/mapMutations生成方法（对象写法）
    - mapActions/mapMutations生成方法（数组写法）

本篇介绍vuex的辅助函数： mapActions和 mapMutations。

代码涉及两个文件，

store/index.js。本例中，该文件内容不发生变更。
Count.vue。本例中，该文件内容将发生多次变更，如
- 辅助函数mapActions生成方法，方法中调用dispatch联系actions。
  - 对象写法
  - 数组写法
- 辅助函数mapMutations生成方法，方法中调用commit联系mutations。
  - 对象写法
  - 数组写法

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
    sum:0,
    company:"May技术无限公司",
    position:"FE"
};

const getters = {
    bigSum(state){
        return state.sum*10;
    }
}

const actions = {
    jiaOdd(context,value){
        if(context.state.sum  % 2){
            context.commit("JIA",value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit("JIA",value);
        },500)
    }

};
const mutations = {
    JIA(state,value){
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    }
};


export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

Count.vue

<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <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 {mapState,mapGetters} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    increment(){
      this.$store.commit("JIA",this.num);
    },
    decrement(){  
      this.$store.commit("JIAN",this.num);
    },
    incrementOdd(){
      this.$store.dispatch("jiaOdd",this.num);
    },
    incrementWait(){
      this.$store.dispatch("jiaWait",this.num);
    }
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

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

mapActions/mapMutations生成方法（对象写法）

<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <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 {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions({
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    ...mapMutations({
      increment:"JIA",
      decrement:"JIAN"
    })
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

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

在这里插入图片描述
之所以出现上述问题，是因为$store.dispatch()或$store.commit()时传入了参数this.num，但使用mapActions或mapMutations生成方法时，事件处理方法中默认传入了事件对象作为参数。
对此，解决方法是，模板中将参数num传入事件处理函数，即<button @click="increment(num)"></button>。

以下Count.vue是ok的。

<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">和为奇数时再加</button>
    <button @click="incrementWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions({
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    ...mapMutations({
      increment:"JIA",
      decrement:"JIAN"
    })
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

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

mapActions/mapMutations生成方法（数组写法）

<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="JIA(num)">+</button>
    <button @click="JIAN(num)">-</button>
    <button @click="jiaOdd(num)">和为奇数时再加</button>
    <button @click="jiaWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions(["jiaOdd","jiaWait"]),
    ...mapMutations(["JIA","JIAN"])
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

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