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

Posted 2023-03-16

【中文标题】错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态

【英文标题】：Error: [vuex] do not mutate vuex store state outside mutation handlers

【发布时间】：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
,

【参考方案1】：

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

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

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

【讨论】：

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