mutations vuex 调用_vuex 怎么在actions中调用mutations中的函数?

1、流程顺序

“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。

2、角色定位

基于流程顺序,二者扮演不同的角色。

Mutation:专注于修改State,理论上是修改State的唯一途径。

Action:业务代码、异步请求。

3、限制

角色不同,二者有不同的限制。

Mutation:必须同步执行。

Action:可以异步,但不能直接操作State。

怎么调用来了看这里:

const mutations = {

[setState](state, value) {

state.xxx = value

}

}

此处value可以是对象,可以是值等

组件调用方式: this.$store.commit('setState', [value])

(2).ACTIONS

// 第一种写法简写形式

const actions = {

[addPlus]({commit}) { // 简写方式,待研究

commit('[setState]', value)

//此处value可以是对象,可以是固定值等

}

}

// 第二种形式

const actions = {

[addPlus](context) {

//context 官方给出的指定对象, 此处context可以理解为store对象

context.commit('[setState]', value)

}

}

/* 两处的commit都是提交的mutations中的字符串的事件类型名称,对应会调用mutations中的回调函数 */

actions在组件中的调用方式:

import mapActions from 'vuex'

methods: {

...mapActions: ([

'addPlus'

]),

setAddPlus () {

this.$store.dispatch('addPlus', [value]) // 异步调用mutations

}

}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在同一个模块mutations可以通过context.commit()方法调用同模块下的其他mutations方法,也可以通过context.dispatch()方法调用同模块下的actions方法。 具体来说,可以在mutations使用context.commit()方法来触发同模块下其他mutations方法,例如: ```javascript // module.js const module = { state: { count: 0 }, mutations: { increment(state) { state.count++ }, incrementTwice(state) { context.commit('increment') // 调用同模块下的increment方法 context.commit('increment') // 再次调用同模块下的increment方法 } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } } ``` 在上面的代码mutations的incrementTwice方法会通过context.commit()方法调用同模块下的increment方法,这是因为在同一模块下的mutations和actions共享同一个context对象。 如果需要在mutations调用同模块下的actions方法,可以通过context.dispatch()方法来触发,例如: ```javascript // module.js const module = { state: { count: 0 }, mutations: { incrementAsync(state) { context.dispatch('incrementAsync') // 调用同模块下的incrementAsync方法 } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } } ``` 在上面的代码mutations的incrementAsync方法会通过context.dispatch()方法调用同模块下的actions的incrementAsync方法。需要注意的是,actions方法必须通过store.dispatch()来调用,而mutations方法则通过context.commit()来调用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值