在 Vuex 突变中访问 getter

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 对象的引用传递给突变，但没有必要这样做，这会使水变得混乱。

---

如果您将 getter 和 mutation 放在单独的模块中，则可以在 mutation 中导入 getter，然后执行以下操作：

import getters from './getters'

askQuestion(state) {
  const question = getters.getQuestion(state)
  // etc
}

---

如果有人正在寻找一个简单的解决方案，@bbugh 写出了一种解决此问题的方法 here，只需让突变和 getter 都使用相同的函数：

function is_product_in_cart (state, product) {
  return state.cart.products.indexOf(product) > -1
}

export default {
  mutations: {
    add_product_to_cart: function (state, product) {
      if (is_product_in_cart(state, product)) {
        return
      }
      state.cart.products.push(product)
    }
  },

  getters: {
    is_product_in_cart: (state) => (product) => is_product_in_cart(state, product)
  }
}

---

另一种解决方案是导入现有商店。假设您正在使用模块并且您的模块名为 foo，您的 mutator 文件将如下所示 store/foo/mutations.js：

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

我并不是说这是最佳做法，但它似乎有效。

---

如果将 store 声明为表达式，您还可以在突变中引用 Store 对象，如下所示：

const Store = new Vuex.Store({
  state: {...},
  getters: {...},
  mutations: {
    myMutation(state, payload) {
      //use the getter
      Store.getters.getter
    }
  }
});

---

用 vuex 4 测试

const state = () => ({
  some_state: 1
})

const getters = {
  some_getter: state => state.some_state + 1
}

const mutations = {
  GET_GETTER(state){
    return getters.some_getter(state)
  }
}

在你组件的某个地方

store.commit('GET_GETTER') // output: 2

---