我可以从 Vuex 商店中的突变之一调用提交吗

Question

我有一个 vuex 商店，如下所示：

 import spreeApi from '../../gateways/spree-api'
// initial state
const state = {
  products: [],
  categories: []
}

// mutations
const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   commit('SET_CATEGORIES')
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(function(product) { return product.category})
 }

}

const actions = {
 FETCH_PRODUCTS: (state, filters) => {
   return spreeApi.get('products').then(response => state.commit('SET_PRODUCTS', response))
 }
}

export default {
  state,
  mutations,
  actions
}

我想调用 mutation: SET_CATEGORIES from mutation: SET_PRODUCTS ，但这给了我错误：

projectFilter.js:22 Uncaught (in promise) ReferenceError: commit is not defined(…)

什么应该是正确的方法来做到这一点。我试过 store.commit 和 this.commit ，但这些也给出了类似的错误。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当你已经在做一个突变时，没有办法 commit 另一个突变。突变是改变状态的同步调用。在一个突变中，您将无法提交另一个突变。

这是 Vuex 的 API 参考： https ://vuex.vuejs.org/en/api.html

如您所见，突变处理程序仅接收 state 和 payload ，仅此而已。因此，您得到 commit 为 undefined 。

在上述情况下，您可以将 PRODUCT 和 CATEGORIES 设置为与单个提交相同的突变处理程序的一部分。如果以下代码有效，您可以尝试：

 // mutations
const mutations = {
    SET_PRODUCTS_AND_CATEGORIES: (state, response) => {
        state.products = response.data.products
        state.categories = state.products.map(function(product) { return product.category})
    },
    // ...
}

编辑： 请参阅 Daniel S. Deboer 提供的以下答案。正确的方法是从一个动作中提交两个突变，如他的 回答 中所述。

原文由 Mani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你绝对必须提交两个突变，为什么不从一个动作中做呢？操作不必执行异步操作。您可以像使用 state 一样解构 action 中的 commit 方法，如下所示：

 commitTwoThings: ({commit}, payload) => {
  commit('MUTATION_1', payload.thing)
  commit('MUTATION_2', payload.otherThing)
}

原文由 Daniel S. Deboer 发布，翻译遵循 CC BY-SA 3.0 许可协议