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属性，但我希望你看到我在尝试什么去做。也就是说，有条件地操纵状态。

在变异中，this为undefined，state参数可以访问state对象，而不是商店的其余部分。

The documentation on mutations并未提及有关此事的任何内容。

我的猜测是，除非我错过了什么，否则它是不可能的？我想替代方法是在商店外执行此逻辑（导致代码重复）或实现执行此操作的操作，因为操作可以访问整个商店上下文。我非常确定这是一种更好的方法，那就是将变异集中在它实际应该做的事情上;改变国家。这可能是我最终会做的事情，但我只是好奇是否有可能在突变中访问一个吸气剂？

Answer 1

Vuex商店变种方法不提供对getter的直接访问。

这可能是不好的做法，但是在提交类似的突变时你可以传递对_aQuickFilters的引用：

getters

Answer 2

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

import getters from './getters'

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

Answer 3

如果有人在寻找简单的解决方案，@ bbugh通过使突变体和吸气剂都使用相同的功能，写出了一种解决此here的方法：

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

Answer 4

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

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

我并不是说这是最佳做法，但似乎可行。

Answer 5

使用 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

Answer 6

如果您将商店声明为表达式，您也可以在突变内引用Store对象，如下所示：

const Store = new Vuex.Store({...});

因此在突变内，您可以使用吸气剂：

mutation(state, payload) {
    Store.getters.getter /*and so on*/
}

在Vuex突变中访问getter

6 个答案: