辅助函数

mapState方法

用于帮助我们映射 state 中的数据为计算属性

import {mapState} from 'vuex'
computed:{
  // 借助mapState生成计算属性【对象写法】 ==> sum为计算属性名，'sum'为state中的数据
  ...mapState({sum:'sum'})
  
  // 借助mapState生成计算属性【数组写法】
  ...mapState(['sum'])
}

mapGetter方法

用于帮助我们映射 getters 中的数据为计算属性

import {mapGetters} from 'vuex'
computed:{
  // 借助mapGetters生成计算属性 【对象写法】
  ...mapGetters({bigSum:'bigSum'})
  // 借助mapGetters生成计算属性 【数组写法】
  ...mapGetters(['bigSum'])
}

mapMutations方法

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

import {mapMutations} from 'vuex'
<button @click="addSum(num)">+</button>

// 靠mapMutations生成 【对象写法】
methods:{
  // 点击事件的方法必须传入要操作的数据，否则报错（方法不加括号，默认第一个参数是event对象）
  ...mapActions({addSum:'add'})
}


// 靠mapMutations生成 【数组写法】
methods:{
  // 点击事件的方法名和mutations中的方法名同名时可以使用简写
  // 此时点击事件方法必须传参，否则报错
  ..mapMutations(['add'])
  
  // 点击事件的方法名和mutations中的方法名不一致时
  // 在点击事件的方法内调用mutations中的方法并传参
  ..mapMutations(['add'])
  addSum(){
    this.add(this.num)
  }
}

mapActions方法

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

import {mapActions} from 'vuex'
<button @click="adds(num)">+</button>

// 靠mapActions生成 【对象写法】
methods:{
  // 点击事件的方法必须传入要操作的数据
  ...mapActions({adds:'add'})
}


// 靠mapActions生成 【数组写法】
methods:{
  // 点击事件的方法名和actions中的方法名同名时可以使用简写
  // 此时点击事件方法必须传参，否则报错
  ..mapActions(['add'])
  
  // 点击事件的方法名和actions中的方法名不一致时
  // 在点击事件的方法内调用actions中的方法并传参
  ..mapActions(['add'])
  adds(){
    this.add(this.num)
  }
}

mapMutations与mapActions使用时，若需要传递参数，则在模版中绑定事件时传递好参数，否则参数时事件对象

示例

<template>
  <div>
    <p>{{ num }}</p>
    <p>{{ doubleNum }}</p>
    <button @click="addNum(10)">同步按钮</button>
    <button @click="changeNum(20)">异步按钮</button>
  </div>
</template>

<script>
// 辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["num"]),
    ...mapGetters(["doubleNum"]),
  },
  methods: {
    ...mapMutations(["addNum"]),
    ...mapActions(["changeNum"]),
  },
};
</script>