Vuex中直接修改state与commit来修改state的区别

Vuex中直接修改state与commit来修改state的区别

在Vuex中，直接修改state和通过commit来修改state的区别在于：

• 直接修改state会导致错误，而通过commit来修改state是唯一推荐的方式。
• 直接修改state会跳过Vuex的mutation检测，而通过commit来修改state会触发mutation。
• Mutation是同步的，不会引起任何异步操作，而action则是异步的，可以进行异步操作。

直接修改state会导致错误

// 直接修改state
state.count++

以上代码会导致错误，因为Vuex的state是只读的。要修改state，必须通过commit来触发mutation。

commit来修改state

// 通过commit来修改state
commit('increment')

以上代码会触发mutation increment。mutation是一个同步函数，它会直接修改state。

Mutation是同步的，action是异步的

mutation是同步的，不会引起任何异步操作。而action则是异步的，可以进行异步操作。

// mutation
mutations: {
  increment (state) {
    state.count++
  }
}

// action
actions: {
  asyncIncrement ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

以上代码中，increment是一个mutation，它是同步的。而asyncIncrement是一个action，它是异步的。当调用asyncIncrement时，它会先执行异步操作，然后再触发mutation increment来修改state。

总结

在Vuex中，直接修改state会导致错误，而通过commit来修改state是唯一推荐的方式。通过commit来修改state会触发mutation，而mutation是Vuex中用于修改state的唯一途径。Mutation是同步的，不会引起任何异步操作，而action则是异步的，可以进行异步操作。