我可以从Vuex商店中的一个突变调用commit [英] Can I call commit from one of mutations in Vuex store
问题描述
我有一个 vuex 商店,如下所示:
I have a vuex store, like following:
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
,但这给了我错误:
I want to call mutation: SET_CATEGORIES
from mutation: SET_PRODUCTS
, But this gives me error:
projectFilter.js:22未捕获(在承诺中)ReferenceError:未定义提交(...)
projectFilter.js:22 Uncaught (in promise) ReferenceError: commit is not defined(…)
这应该是正确的方法。我试过 store.commit
和 this.commit
,但这些也给出了类似的错误。
What should be correct way to do this. I tried store.commit
and this.commit
, but these also gave similar errors.
推荐答案
当你已经进行了变异时,没有办法提交
另一个变异。突变是一种改变状态的同步呼叫。在一个突变中,您将无法提交另一个突变。
When you are already doing a mutation, there is no way to commit
another mutation. A mutation is a synchronous call which changes the state. Within one mutation, you will not be able to commit another mutation.
以下是Vuex的API参考: https://vuex.vuejs.org/en/api.html
Here is the API reference for Vuex: https://vuex.vuejs.org/en/api.html
当你可以看到,变异处理程序只接收 state
和 payload
,仅此而已。因此,您将 commit
作为 undefined
。
As you can see, a mutation handler receives only state
and payload
, nothing more. Therefore you are getting commit
as undefined
.
In在上面的情况下,您可以将PRODUCT和CATEGORIES设置为与单个提交相同的变异处理程序的一部分。如果以下代码有效,您可以尝试:
In your case above, you can set the PRODUCT and CATEGORIES as part of the same mutation handler as a single commit. You can try if the following code works:
// 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 提供。正确的方法是从单个动作中提交两个突变,如他的回答所述。
Please refer to the answer below, provided by Daniel S. Deboer. The correct method is to commit two mutations from a single action, as described in his answer.
这篇关于我可以从Vuex商店中的一个突变调用commit的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!