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