辅助函数#
mapState方法#
用于帮助我们映射 state 中的数据为计算属性
1import {mapState} from 'vuex'
2computed:{
3 // 借助mapState生成计算属性【对象写法】 ==> sum为计算属性名，'sum'为state中的数据
4 ...mapState({sum:'sum'})
5
6 // 借助mapState生成计算属性【数组写法】
7 ...mapState(['sum'])
8}mapGetter方法#
用于帮助我们映射 getters 中的数据为计算属性
1import {mapGetters} from 'vuex'
2computed:{
3 // 借助mapGetters生成计算属性 【对象写法】
4 ...mapGetters({bigSum:'bigSum'})
5 // 借助mapGetters生成计算属性 【数组写法】
6 ...mapGetters(['bigSum'])
7}mapMutations方法#
用于帮助我们生成与 mutations 对话的方法，即：包含 $store.commit(xxx) 的函数
1import {mapMutations} from 'vuex'
2<button @click="addSum(num)">+</button>
3
4// 靠mapMutations生成 【对象写法】
5methods:{
6 // 点击事件的方法必须传入要操作的数据，否则报错（方法不加括号，默认第一个参数是event对象）
7 ...mapActions({addSum:'add'})
8}
9
10
11// 靠mapMutations生成 【数组写法】
12methods:{
13 // 点击事件的方法名和mutations中的方法名同名时可以使用简写
14 // 此时点击事件方法必须传参，否则报错
15 ..mapMutations(['add'])
16
17 // 点击事件的方法名和mutations中的方法名不一致时
18 // 在点击事件的方法内调用mutations中的方法并传参
19 ..mapMutations(['add'])
20 addSum(){
21 this.add(this.num)
22 }
23}mapActions方法#
用于帮助我们生成与 actions 对话的方法，即：包含 $store.dispatch(xxx) 的函数
1import {mapActions} from 'vuex'
2<button @click="adds(num)">+</button>
3
4// 靠mapActions生成 【对象写法】
5methods:{
6 // 点击事件的方法必须传入要操作的数据
7 ...mapActions({adds:'add'})
8}
9
10
11// 靠mapActions生成 【数组写法】
12methods:{
13 // 点击事件的方法名和actions中的方法名同名时可以使用简写
14 // 此时点击事件方法必须传参，否则报错
15 ..mapActions(['add'])
16
17 // 点击事件的方法名和actions中的方法名不一致时
18 // 在点击事件的方法内调用actions中的方法并传参
19 ..mapActions(['add'])
20 adds(){
21 this.add(this.num)
22 }
23}mapMutations与mapActions使用时，若需要传递参数，则在模版中绑定事件时传递好参数，否则参数时事件对象
示例#
1<template>
2 <div>
3 <p>{{ num }}</p>
4 <p>{{ doubleNum }}</p>
5 <button @click="addNum(10)">同步按钮</button>
6 <button @click="changeNum(20)">异步按钮</button>
7 </div>
8</template>
9
10<script>
11// 辅助函数
12import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
13export default {
14 data() {
15 return {};
16 },
17 computed: {
18 ...mapState(["num"]),
19 ...mapGetters(["doubleNum"]),
20 },
21 methods: {
22 ...mapMutations(["addNum"]),
23 ...mapActions(["changeNum"]),
24 },
25};
26</script>目录