为什么Mutation不能使用异步函数

什么是mutation

通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离。
Vuex中store数据改变的唯一方法就是mutation

mutations的使用

每个 mutation 都有一个字符串的事件类型 (type) ,相当于当前事件的唯一标识,以便于你用commit触发它。 每个mutation都有一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参,.同时他也支持额外参数的传入,额外参数的术语叫'载荷'

//state.js
	let state = {
	  count: 1,
	  name: 'dkr',
	}
	export default state
//mutation.js
// 第一个参数默认接收state对象
const increment = (state) => {
  state.count++
}
const decrement = (state) => {
  state.count--
}
//第二个参数接收'载荷'
const add = (state, n) => {
  state.count += n
}
const fn = (state, json) => {
  state.name = json.first + json.second + state.name
}
export {increment, decrement, add, fn}
//触发节点的方法
decrement () {
	this.$store.commit('decrement')
},
increment () {
  this.$store.commit('increment')
},

mutations为什么不能使用异步函数

Vuex中所有的状态更新的唯一途径都是mutation,异步操作通过 Action 来提交 mutation实现,这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来,然后就可以实现 time-travel 了。
如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vuex 中,Mutation 是用来修改状态的唯一方式,只有通过 Mutation 才能修改状态。Mutation 是同步执行的,这是为了确保状态变更的可追踪性和可维护性。如果允许在 Mutation 中进行异步操作,那么状态变更的顺序将变得不可预测,会给状态管理带来很大的困难。 如果需要进行异步操作,可以使用 Action 来实现。Action 可以包含任意异步操作,包括调用 API、定时器等等。Action 通过提交 Mutation 来修改状态,确保状态变更的顺序是可预测的。 以下是一个示例代码,演示了如何在 Action 中进行异步操作: ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { incrementAsync(context) { setTimeout(() => { context.commit('increment'); }, 1000); } } }); export default store; ``` 在上面的代码中,定义了一个 `incrementAsync` Action,通过 `setTimeout` 函数模拟了一个异步操作,1 秒后调用 `commit` 方法提交 `increment` Mutation 来修改状态。 需要注意的是,Action 接受一个与 store 实例具有相同方法和属性的 context 对象作为第一个参数,可以通过 context.commit 方法来提交 Mutation。在 Action 中进行异步操作时,应该使用 Promise 对象来返回异步操作的结果,以便在组件中可以通过 `.then` 和 `.catch` 方法获取异步操作的结果和错误信息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值