Error: [vuex] do not mutate vuex store state outside mutation handlers

Question

Why do I get error 「Error: [vuex] do not mutate vuex store state outside mutation handlers.」

・Error procedure

1.Input form data

2.Click submit(dispatch "setFormData")

3.Input form data

4.error

When input form data，I set data into tmpFormData. tmpFormData is not vuex state. It is components data.

Maybe，when exec 「this.$store.dispatch('ranks/setFormData', this.tmpFormData)」

Is tmpFormData and formData connected?

pages/search.vue

<template>
  <v-container>
    <v-form ref="form" v-on:submit.prevent="search">
      <v-list width=100%>
        <v-list-item v-for="(criteria, name, i) in searchCriterias" :key="i">
          <v-subheader>{{criteria.name}}</v-subheader>
            <template v-if="criteria.type=='checkbox'">
              <v-checkbox
                v-for="(item, j) in criteria.items" :key="j"
                v-model="tmpFormData[name]"
                :label="item"
                :value="j + 1"
              ></v-checkbox>
            </template>
        </v-list-item>
      </v-list>
    <v-btn color="success" class="mr-4" type="submit">Search</v-btn>
  </v-form>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        tmpFormData: {
          search_1: null,
          search_2: null,
          search_3: null,
          search_4: null,
        },
        searchCriterias: {
          search_1: {
            name: "sex",
            items: ["male", "female"],
          },
        search_2: {
            name: "price",
            items: [
              {label: "not selected", value: 0},
              {label: "under 8000yen", value: 1}
            ],
        },
      },
    }
  },
  methods: {
    async search() {
      await this.$store.dispatch('ranks/setFormData', this.tmpFormData)
    }
  }
  }
</script>

store/search.js

export const state = () => ({
  formData: [],
})

export const mutations = {
  setFormData(state, formData) {
    state.formData = formData
  },
}

export const actions = {
  async setFormData({ commit, getters }, formData) {
    commit('setFormData', formData)
  },
}

export const getters = {
  formData (state) {
    return state.formData
  },
}

The error disappeared when I fixed it as follows, but I don't know why

setFormData(state, formData) {
  state.formData.search_1 = formData.search_1
  state.formData.search_2 = formData.search_2
  state.formData.search_3 = formData.search_3
  state.formData.search_4 = formData.search_4
},

Chris Chris · Accepted Answer · 2019-12-05T07:21:20

I guess you have set strict: true on vuex.

In this mode, vuex warns you, when you manipulate any state without using a mutation. With this statement v-model="tmpFormData[name]" you do exactly that.

You can either disable strict mode or use something like vuex-map-fields

Error: [vuex] do not mutate vuex store state outside mutation handlers

1 Answers