将表单与状态绑定时在 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] do not mutate vuex store state outside mutation handlers.

Answer 1

如错误所述，您不应改变状态。有几种方法可以处理这个问题。在这里快速搜索可以给你很多答案。

这是我的（使用 Lodash 的 cloneDeep）：

将表单与状态绑定时在 Nuxt JS 中出现突变错误

Getting mutation error in Nuxt JS while binding form with state

javascript

vuex

nuxt.js