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

最新推荐文章于 2023-11-25 18:33:11 发布

HaanLen

最新推荐文章于 2023-11-25 18:33:11 发布

阅读量707

点赞数

分类专栏： Vue全家桶文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_40119412/article/details/107596361

版权

Vue全家桶专栏收录该内容

35 篇文章 16 订阅

订阅专栏

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