我可以从Vuex商店中的一个突变调用commit

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
}

我想调用变异:SET_CATEGORIES来自变异:SET_PRODUCTS,但这给了我错误:

projectFilter.js:22未捕获(在promise中)ReferenceError:未定义提交(...)

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

Answer 1

如果你绝对必须提交两个突变,为什么不从一个动作做到这一点？操作不必执行异步操作.您可以像处理状态一样对动作中的提交方法进行解构:

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

Answer 2

当你已经进行了突变时,就无法进行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提供的以下答案.正如他的回答所述,正确的方法是从单个动作中提交两个突变.

Answer 3

要在突变之间共享代码,您必须创建一个执行工作的新函数,然后可以重复使用.幸运的是,突变只是普通的旧函数,我们可以根据state自己的喜好传递参数,所以这很容易做到.

例如:

const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   setCategories(state)
 },
 SET_CATEGORIES: (state) => {
   setCategories(state)
 }
}

function setCategories(state) {
  state.categories = state.products.map(product => product.category)
}

Answer 4

作为记录。要从突变方法中调用其他突变，请执行以下操作：

const mutations = {
    mutationOne(state, payload){
        this.commit("mutationTwo", payload)
    },
    mutationTwo(state, payload){
        console.log("called from another mutation", payload)
    }
}

Answer 5

如果我有一些影响多个突变之间状态的通用代码,我必须在我的所有突变上复制相同的代码？或者有更好的方法吗？

Answer 6

阅读有关Actions的Vuex文档，很清楚它们的用途。

• 提交突变而不是改变状态
• 可以包含任意异步操作

动作可以（不是必须）包含异步代码。其实下面的例子是正确的

increment (context) {
   context.commit('increment')
}

使用动作执行多个突变时，我看不到任何问题。