调用vuex中mutations和ations的方式 - vue篇

mutations

1.直接通过$store.commit调用

  <button @click="$store.commit('mutations中的方法名','可带参数')">调用</button>

2.通过在methods中注册方法调用

// script中先引入mapMutations
import {mapMutations} from 'vuex'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
    //注册方法，三个.是属性展开符，可以将mapMutations中的方法展开后放入methods中，就可以直接调用了
    methods:{
        ...mapMutations(['mutations中的方法名称'])
    }
}
// template中调用
 <button @click="mutations中的方法名称('可带参数')">-</button>

actions

1. 通过$store.dispatch 方法触发

    add(){
        this.$store.dispatch('actionAdd')
    },
    reduce(){
        this.$store.dispatch('actionReduce')
    }
// 支持同样的载荷方式和对象进行分发：
    add(){
        this.$store.dispatch('actionAdd', {
            num: 20
        })
    },
    reduce(){
        this.$store.dispatch(
            {type:'actionReduce', num : 10}
        )
    }
// 第二个参数接受分发是传递的值

2.通过在methods中注册方法调用

import { mapActions } from 'vuex';
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
    //注册方法，三个.是属性展开符，可以将mapMutations中的方法展开后放入methods中，就可以直接调用了
    methods:{
        ...mapActions(['actions中的方法名称']);
        // 调用
        this.方法名('传参数')
    }
}