[解決済み] Vuexストアのミューテーションの1つからコミットを呼び出すことはできますか？

質問

私は 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 Uncaught (in promise) ReferenceError: commit is not defined(...)

これを行うための正しい方法は何でしょうか。試しに store.commit と this.commit などがありますが、これらも同様のエラーが発生します。

どのように解決するのですか？

すでに突然変異をおこしている場合、その突然変異をおこすには commit 別の突然変異を行うことはできません。変異は状態を変更する同期呼び出しです。1つの変異の中では、別の変異をコミットすることはできません。

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})
    },
    // ...
}

EDITです。 の提供する以下の回答を参照してください。 ダニエル・S・デボア . 正しい方法は、彼の回答にあるように、1つのアクションから2つの変異をコミットすることです。