Accessing getters within Vuex mutations

Vuex store mutation methods do not provide direct access to getters.

This is probably bad practice*, but you could pass a reference to getters when committing a mutation like so:

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

---

* It is best practice to keep mutations a simple as possible, only directly affecting the Vuex state. This makes it easier to reason about state changes without having to think about any side effects. Now, if you follow best practices for vuex getters, they should not have any side effects in the first place. But, any logic that needs to reference getters can run in an action, which has read access to getters and state. Then the output of that logic can be passed to the mutation. So, you can pass the reference to the getters object to the mutation, but there's no need to and it muddies the waters.

If anyone is looking for a simple solution, @bbugh wrote out a way to work around this here by just having both the mutations and getters use the same function:

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

If you put your getters and mutations in separate modules you can import the getters in the mutations and then do this:

import getters from './getters'

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