使用 state 綁定表單時在 Nuxt JS 中出現突變錯誤

Question

我正在嘗試將表單的字段與 Nuxt JS 中的 vuex 存儲綁定。 它適用於帶有get() set() in computed的普通文本字段。 但是在手動自定義獲取和設置時遇到了麻煩。 我正在嘗試將對象從我的模板中以特定格式推送到數組中以存儲並保持它們之間的綁定。 這是我的代碼：

<template>
  <div class="container setting-form-area-business">
    <b-form-group v-for="(input, index) in phoneNumbers" :key="`phoneInput-${index}`">
      <label>Mobile Number {{index+1}}*</label>
      <b-input-group>
        <b-form-input v-model="input.phone" @input="updateStore" class="custom-form-input-business">
        </b-form-input>
        <b-input-group-append v-show="phoneNumbers.length > 1">
          <b-button class="mobile-number-remove-btn" @click="removeField(index, phoneNumbers)"></b-button>
        </b-input-group-append>

      </b-input-group>

    </b-form-group>

    <b-form-group>

      <b-button class="jh-btn2" @click="addField">Add More Mobile Number</b-button>

    </b-form-group>

  </div>
</template>
<script>
  export default {
    props: [
      'visited'
    ],

    data() {
      return {
        phoneNumbers: this.$store.state.business.formvalue.mobileNumber.length ? this.$store.state.business.formvalue
          .mobileNumber : [{
            phone: ""
          }],


      }
    },
    computed: {
      mobilenumbers() {
        return this.$store.state.business.formvalue.mobileNumber
      },

    },
    methods: {

      addField() {
        this.phoneNumbers.push({
          value: ""
        });

      },
      removeField(index, fieldType) {

        fieldType.splice(index, 1);
        console.log('fieldType', fieldType);
        this.emitErrorStatus();
      },
      updateStore() {
        this.$store.commit('business/setformmobileNumber', {
          mobileNumber: this.phoneNumbers
        })
      }
    },
  }

</script>

當我在 vue 時，這工作正常，但是來到 nuxt，它給了我錯誤

[vuex] 不要在突變處理程序之外改變 vuex 存儲 state。

Answer 1

如錯誤所述，您不應該改變 state。 有幾種方法可以處理這一問題。 在這里快速搜索可以給你很多答案。

這是我的（使用 Lodash 的cloneDeep ）： https://stackoverflow.com/a/66262659/8816585