Question

为什么会出现错误“错误：[vuex]不在变异处理程序之外变异vuex存储状态。

・错误处理程序

1。输入表单数据

2。单击Submit（发送“ 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>

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

按以下步骤修复后，错误消失了，但我不知道为什么

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

Answer 1

我想您已经在vuex上设置了strict: true。

在此模式下，当您在不使用突变的情况下操作任何状态时，vuex会警告您。使用此语句v-model="tmpFormData[name]"，您可以做到这一点。

您可以禁用严格模式或使用类似vuex-map-fields

错误：[vuex]不会在变异处理程序之外变异vuex存储状态

1 个答案: