Vue.js 的vuex commit 不会将更改提交到store

在本文中，我们将介绍Vue.js中的vuex commit方法以及它在更改store时的表现。

什么是Vuex

Vuex是Vue.js的官方状态管理工具，用于管理Vue应用中的状态。它提供了一个集中式的存储机制，允许我们以可预测的方式管理应用的各种状态。Vuex中的状态存储在一个称为store的对象中，并且可以通过getters、mutations和actions等方式进行更改。其中，mutations用于同步更改状态，actions用于异步更改状态。

vuex commit 方法

在Vuex中，我们可以使用commit方法来触发一个mutation，进而更改store中的状态。具体来说，commit方法接受两个参数，第一个参数是要触发的mutation的名称，第二个参数是一个可选的payload，用于传递额外的数据。

下面是一个示例：

// 创建store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    }
  }
})

// 在组件中使用commit方法
this.$store.commit('increment', 5)

在上述示例中，我们通过commit方法触发了名为increment的mutation，同时传递了一个值为5的payload。该mutation将会将store中的count属性增加5。

vuex commit 方法的问题

在使用vuex commit方法时，有时候会遇到一个问题：更改并不会提交到store中。这可能是因为在调用commit方法之前，没有正确地创建和配置vuex store。

以下是一些可能导致vuex commit方法不会提交更改的常见原因：

1. 忘记将Vuex绑定到Vue实例上

// 错误示例
import Vuex from 'vuex'

const store = new Vuex.Store({
  // ...
})

new Vue({
  el: '#app',
  store,  // 忘记绑定store
  // ...
})

在上述示例中，我们忘记将store绑定到Vue实例的store选项上。这样，vuex commit方法将无法正确地将更改提交到store。

为了修复这个问题，我们需要在Vue实例的store选项中添加store对象：

// 正确示例
import Vuex from 'vuex'

const store = new Vuex.Store({
  // ...
})

new Vue({
  el: '#app',
  store: store,  // 正确地绑定store
  // ...
})

2. 忘记在Vue组件中导入vuex

// 错误示例
export default {
  // ...
  methods: {
    incrementCounter() {
      this.$store.commit('increment')  // 忘记导入vuex
    }
  }
  // ...
}

在上述示例中，我们忘记在Vue组件中导入vuex，导致无法正确调用vuex commit方法。

修复这个问题很简单，只需在Vue组件中添加导入语句即可：

// 正确示例
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations(['increment'])
  }
  // ...
}

3. 忘记在Vue组件中注入vuex store

// 错误示例
new Vue({
  el: '#app',
  // ...
})

在上述示例中，我们忘记在Vue实例中注入vuex store，导致vuex commit方法无法正常工作。

修复这个问题，我们需要在Vue实例的store选项中添加store的实例对象：

// 正确示例
new Vue({
  el: '#app',
  store: store,  // 添加store实例
  // ...
})

总结

vuex commit方法用于触发vuex store中的mutation，以更改应用的状态。但是，在使用vuex commit方法时，有时候会遇到更改不会提交到store的问题。检查可能的原因，如未正确绑定vuex到Vue实例、未导入vuex或未注入vuex store等，可以解决这些问题。确保正确配置vuex以及使用commit方法时提供正确的参数，能够确保更改能够成功提交到vuex store中。