Vuex mutation throws an error - do not mutate vuex store state outside mutation handlers

Question

I have a Vuex store object which has a mutation.

SET_FILTERS_CATEGORIES(state, payload) {
    state.filters.categories = payload;
},

SET_FILTERS_CATEGORIES(state, payload) {
    // state.filters.categories = payload;  // This "works"
},

This mutation throws me an error:

do not mutate vuex store state outside mutation handlers

If I commented this line it "works". I dont understand what is the problem. It is inside the mutation section.

@Čamo How are you calling the mutation? That's the code we're looking for. — tony19, Oct 12 '21 at 08:29
Please show some relevant and concrete code. We can't help you with just this. Also, did you looked up for this question anywhere? This might be a good starting point: https://stackoverflow.com/q/46044276/8816585 — kissu, Oct 12 '21 at 08:51
That link is related to problem with model in inputs. This is not the case. I really dont have any more relevant code. This is the line which throws an error. The question is why? Is there a problem with nested items in payload? Thats the question. — Čamo, Oct 12 '21 at 08:58
Nested items in payload wouldn't cause this problem. The key is the code that invokes the mutation. Can you update this [stackblitz](https://stackblitz.com/edit/nuxt-mutate-vuex-data?file=store/products.js) to reproduce the problem? — tony19, Oct 12 '21 at 22:32

score 1 · Answer 1 · answered Oct 13 '21 at 01:38

1

you must call your mutation only inside action method.

code exemple

const mutations = {
  SET_FILTERS_CATEGORIES(state, payload) {
      state.filters.categories = payload;
  },
}

const actions = {
  getFiltersCategories ({commit}, payload){
    commit('SET_FILTERS_CATEGORIES', payload)
  }
}

answered Oct 13 '21 at 01:38

viryl15

454
4
9

Yes I do it this way. However it throws an error. – Čamo Oct 13 '21 at 11:25
it throws the same error ? let me see where you call SET_FILTERS_CATEGORIES in your code – viryl15 Oct 13 '21 at 12:16
I call it in the actions section. There is an action for it. – Čamo Oct 13 '21 at 12:35
cand i see your code ? – viryl15 Oct 13 '21 at 12:39

Vuex mutation throws an error - do not mutate vuex store state outside mutation handlers

1 Answers1