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

Question

我正在尝试将表单的字段与Nuxt JS中的vuex存储绑定。它可以很好地处理computed中具有get()set()的普通文本字段。但是在手动自定义获取和设置时遇到了问题。我正试图将对象从我的模板推送到一个特定格式的数组中以存储，并保持它们之间的绑定。这是我的代码：

<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存储状态进行突变。

Answer 1

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

这是我的(使用Lodash的cloneDeep(：https://stackoverflow.com/a/66262659/8816585