美文网首页
Vuex(篇5-3)——modules中actions

Vuex(篇5-3)——modules中actions

作者: owlcity | 来源:发表于2022-12-08 17:55 被阅读0次

组件中调用模块的actionaction中触发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>

相关文章

网友评论

      本文标题:Vuex(篇5-3)——modules中actions

      本文链接:https://www.haomeiwen.com/subject/paeffdtx.html