web-dev-qa-db-ja.com

Vuex変異内のゲッターへのアクセス

Vuexストアミューテーション内で、ゲッターにアクセスすることは可能ですか？以下の例を考えてください。

new Vuex.Store({
    state: {
        question: 'Is it possible to access getters within a Vuex mutation?'
    },
    mutations: {
        askQuestion(state) {
            // TODO: Get question from getter here
            let question = '';

            if (question) {
                // ...
            }
        }
    },
    getters: {
        getQuestion: (state) => {
            return state.question;
        }
    }
});

もちろん、突然変異内のquestionオブジェクトのstateプロパティに直接アクセスできるので、この例はあまり意味がありませんが、私がやろうとしていることを見てほしいです。つまり、条件付きで状態を操作します。

突然変異内では、thisはundefinedであり、stateパラメーターはストアの残りの部分ではなく、stateオブジェクトへのアクセスを許可します。

突然変異に関するドキュメント はこれを行うことについて何も言及していません。

私が推測するのは、何かを見逃さない限り、それは不可能だということでしょうか？アクションはストアコンテキスト全体にアクセスできるため、このロジックをストアの外部で実行する（コードの重複を引き起こす）か、これを実行するアクションを実装するのが代替手段になると思います。私はそれがより良いアプローチであると確信しています。それは、実際に行うべきことに焦点を合わせた突然変異を維持することです。状態を変更します。それはおそらく私がやることになるだろうが、変異内のゲッターにアクセスすることさえ可能かどうか私は興味がありますか？

vue.jsvuejs2vuex
30
Andy0708

Vuexストア変更メソッドは、ゲッターへの直接アクセスを提供しません。

これはおそらく悪い習慣ですが、次のような突然変異をコミットするときにgettersへの参照を渡すことができます。

actions: {
  fooAction({commit, getters}, data) {
    commit('FOO_MUTATION', {data, getters})
  }
},
mutations: {
  FOO_MUTATION(state, {data, getters}) {
    console.log(getters);
  }
}
34
thanksd

ゲッターとミューテーションを別々のモジュールに配置する場合、ミューテーションにゲッターをインポートしてからこれを実行できます。

import getters from './getters'

askQuestion(state) {
  const question = getters.getQuestion(state)
  // etc
}
4
Kees de Kooter

別の解決策は、既存のストアをインポートすることです。モジュールを使用していて、モジュールの名前がfooであるとすると、ミューテーターファイルは次のようになりますstore/foo/mutations.js：

import index from '../index'
export const askQuestion = (state, obj) => {
    let store = index()
    let getQuestion = store.getters['foo/getQuestion']
}

これがベストプラクティスであるとは言いませんが、うまくいくようです。

0
geoidesic