Vuex（篇5-3）——modules中actions

组件中调用模块的action，action中触发mutation中的方法

模块

const mutations={
    add (state){//state是局部的
        state.count++;
    },
    addN (state,payload){
        state.count += payload.num
    }
}
const actions={
    asynAdd(context){
        setTimeout(() =>{
            context.commit('add')
        },4000)
    }
}

不含参数

方式1：

methods: {
        add (){
            this.$store.dispatch('a/asynAdd')
        }
    }
<button @click='add'>点击添加1</button> 

方式2：

import {mapActions} from 'vuex'
methods: {
        ...mapActions({
            asynAdd:'a/asynAdd'
        })
    }
 <button @click="asynAdd">点击添加3</button>

//另一种写法
...mapActions('a',['asynAdd'])

含参数

方式1：

    methods: {
        addN (){
            this.$store.dispatch('a/asynAdd',{
                num:3
            })
        }
    }
    button @click="addN">点击添加3</button>

方式2：

import {mapActions} from 'vuex'
 ...mapActions('a',['asynAdd']
        ),
        addN (){
            this.asynAdd({num:4})
        }
 <button @click="addN">点击添加3</button>