在Vuex突变中访问getter

Question

在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变异中的对象上访问属性,但我希望你能看到我想要做的事情.也就是说,有条件地操纵状态.

在变异中,thisis undefined和state参数提供对state对象的访问,而不是存储的其余部分.

关于突变的文档没有提到任何关于这样做的事情.

我的猜测是,这是不可能的,除非我错过了什么？我想替代方法是在商店外执行此逻辑(导致代码重复)或实现执行此操作的操作,因为操作可以访问整个商店上下文.我很确定这是一种更好的方法,那就是让变异集中在它实际应该做的事情上; 改变国家.这可能就是我最终会做的事情,但我只是好奇如果甚至可能在突变中访问一个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);
  }
}

Answer 2

如果将获取器和突变体放在单独的模块中，则可以将获取器导入突变体中，然后执行以下操作：

import getters from './getters'

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

Answer 3

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

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