错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态答案

【问题标题】：Error: [vuex] do not mutate vuex store state outside mutation handlers错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态
【发布时间】：2020-03-30 01:05:43
【问题描述】：

为什么我会收到错误「错误：[vuex] do not mutate vuex store state outside mutation handlers。」

・错误处理

1.输入表单数据

2.点击提交(dispatch "setFormData")

3.输入表单数据

4.错误

输入表单数据时，我将数据设置为tmpFormData。 tmpFormData 不是 vuex 状态。是组件数据。

也许，当执行「this.$store.dispatch('ranks/setFormData', this.tmpFormData)」时

tmpFormData 和 formData 连接了吗？

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>

存储/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
  },
}

按如下方式修复后错误消失了，但我不知道为什么

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

【问题讨论】：

标签： vuex nuxt.js

【解决方案1】：

我猜你已经在 vuex 上设置了strict: true。

在这种模式下，当你在不使用突变的情况下操纵任何状态时，vuex 会警告你。有了这个声明v-model="tmpFormData[name]"，您就可以做到这一点。

您可以禁用严格模式或使用vuex-map-fields之类的东西

【讨论】：

谢谢！如果我按照您的建议解决了！