不要在设置状态数组的突变处理程序错误之外改变 vuex 存储状态

Question

将数据写入 vuex 状态后出现错误，因为我使用的是 v-model。该实例同时具有对象和数组实例。对象状态没有错误，但数组部分出现以下错误。有没有人遇到过这种情况？可能的解决方案

步骤：

将数据写入表单(firstName)。
单击“设置状态数组”按钮
更改表单中的数据(firstName)。

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

export const state = () => ({
  formsArray: [],
  formObject: {}
});

const mutations = {
  SET_FORMSARRAY(state, payload) {
    console.log('formsArray', payload);
    state.formsArray = [...payload];
  },
  SET_FORMSOBJECT(state, payload) {
    console.log('formObject', payload);
    state.formObject = { ...payload };
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

<template>
  <div class="container">
    <p>  {{forms}} </p>
    <br>
    <br>
    <div
      v-for="(form, index) in forms"
      :key="index"
      flat
      outlined
      rounded="lg"
    >
      <span>{{index+1}}. firstName</span>
      <v-text-field
        v-model="form.firstName"
        solo
      />
    </div>
    <v-btn
      elevation="2"
      class="ma-2"
      @click="setStateArray"
    >SET STATE ARRAY</v-btn>
    <br>
    <div style="margin-top:20px">
         <span>firstName</span>
      <v-text-field
        v-model="formsObject.firstName"
        solo
      />
     <span>lastName</span>
      <v-text-field
        v-model="formsObject.lastName"
        solo
      />
    <v-btn
      elevation="2"
        class="ma-2"
      @click="setStateObject"
    >SET STATE OBJECT</v-btn>
    </div>
    <br>
    <br>
      <p>State Array:  {{formsArray}} </p>
    <br>
    <br>
      <p> State Object:  {{formObject}} </p>
  </div>

</template>

<script>
import { mapMutations,mapState } from 'vuex'

export default {
    data() {
    return {
      forms: [],
      formsObject: {
        firstName: 'sad',
        lastName: 'sd'
      }
    }
  },
  created() {
    for (let i = 0; i < 2; i++) {
      const formData = {
        firstName: '',
      }
      this.forms.push(formData)
    }
  },
    computed: {
    ...mapState('form', ['formsArray','formObject']),
  },
  methods:{
    ...mapMutations('form',['SET_FORMSARRAY','SET_FORMSOBJECT']),
    setStateArray(){
       this.SET_FORMSARRAY(this.forms)
    },
    setStateObject(){
       this.SET_FORMSOBJECT(this.formsObject)
    }
  }
}
</script>

示例：https://stackblitz.com/edit/vuex-set-state-array-error

Answer 1

测试用例的区别在于数组实际上是一个对象数组，而对象用例是一个平面对象。当您使用扩展语法写入商店时，这对对象来说效果很好。当用数组尝试这个时，只有数组本身被复制，但对内部对象的引用仍然存在 - 因此抛出错误。一种可能的解决方案是对数组内的对象也使用展开语法，或者使用深度复制方法写入存储。

不要在设置状态数组的突变处理程序错误之外改变 vuex 存储状态

Do not mutate vuex store state outside mutation handlers error for set state array

dynamicform

vue.js

vuex

nuxt.js