Javascript 我无法使用Vuex更改表单输入数据

vuex不会在变异处理程序之外变异vuex存储状态

我试图在这里寻找一些东西，因为这个错误很常见，但我还不能解决它

我正在尝试使用vuex创建一个有状态表单

组成部分

<el-form ref="form" :model="form" label-width="130px">


   <el-form-item label="Entrada">
       <el-input v-model="form.dataEntrada"></el-input>
   </el-form-item>


</el-form>

贮藏

---

您正在尝试将

v-model

映射到一块Vuex

状态

。而是在输入中使用

@input

或

@change

将更改提交到存储，并使用

:value

绑定存储中的值

<el-input :value="form.dataEntrada" @input="updateValue" />

更新 模板

贮藏

如果您没有将表单元素设置为必需，并且只想更新已更改的字段，下面是代码

mutations: {
setForm(state, payload) {
  state.form = {
    ...state.form,
    ...payload
  };
}
},

---

非常感谢。错误：无法读取undefinedHere-e.target.value

console.log（e）

的属性“value”，以查看

e

中的内容。它必须是事件objectconsole.log（e）-显示输入值。但是，它不会将数据存储在form.dataentraday中。您必须相应地更改您的变异，如

setValue（state，payload）{state.form.dataEntrada=payload}

<el-input :value="form.dataEntrada" @input="updateValue" />

computed: { form: function() {  return this.$store.state.form }},

methods: { updateValue: function(e) { this.$store.commit('setValue', e.target.value) }}

<template>
<div class="hello">
<el-form ref="form" :model="form" label-width="130px">
  <el-row>
    <el-col :span="4">
      <el-form-item label="Entrada">
        <el-input v-model="form.dataEntrada"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Fornecedor">
        <el-input v-model="form.fornecedor"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Codigo">
        <el-input v-model="form.nfe.codigo"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Numero">
        <el-input v-model="form.nfe.numero"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">Criar</el-button>
  </el-form-item>
</el-form>
</div>
</template>

data() {
   return {
     form: this.$store.state.form
   }
},
methods: {
  onSubmit() {
    this.$store.commit("setForm", this.form);
  }
}

mutations: {
setForm(state, payload) {
  state.form = {
    ...state.form,
    ...payload
  };
}
},