vue.js - 在 Vuex 突变中访问 getter

Question

在 Vuex store mutation 中，是否可以访问 getter？考虑以下示例。

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;
        }
    }
});

当然这个例子没有多大意义，因为我可以直接在突变中的 state 对象上访问 question 属性，但我希望你明白我想做什么。即有条件地操纵状态。

在突变中，this 是 undefined 并且 state 参数提供对 state 对象的访问，并且不是商店的其他部分。

The documentation on mutations没有提到任何关于这样做的事情。

我猜这是不可能的，除非我错过了什么？我想另一种方法是在商店外执行此逻辑(导致代码重复)或实现执行此操作的操作，因为操作可以访问整个商店上下文。我很确定这是一种更好的方法，即让突变专注于它实际应该做的事情；改变状态。这可能是我最终会做的，但我只是好奇是否有可能在突变中访问 setter/getter ？

Answer 1

Vuex 存储突变方法不提供对 getter 的直接访问。

这可能是不好的做法*，但您可以在提交变更时传递对 getters 的引用，如下所示:

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

---

* 最好的做法是让突变尽可能简单，只直接影响 Vuex 状态。这使得在无需考虑任何副作用的情况下更容易推理状态变化。现在，如果您遵循 vuex getter 的最佳实践，它们首先应该不会有任何副作用。但是，任何需要引用 getter 的逻辑都可以在一个操作中运行，该操作具有对 getter 和状态的读取访问权限。然后该逻辑的输出可以传递给突变。因此，您可以将对 getters 对象的引用传递给突变，但没有必要这样做，这会把事情搞得一团糟。