【问题标题】：I cannot change form input data using Vuex我无法使用 Vuex 更改表单输入数据
【发布时间】：2020-10-29 19:39:00
【问题描述】：

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>

计算

computed: {
        form: {
            get () {
                return this.$store.state.form
            },
            set (value) {
                this.$store.commit('setForm', value)
            }
        }
    }

商店

state: {
    form: {
      dataEntrada: ''   
    },
    
},

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

actions: {},

getters: {},

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

您正在尝试将v-model 映射到一段 Vuex state。而是在输入中使用@input 或@change 将更改提交到存储并使用:value 绑定存储中的值。

<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>

Vue

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

商店

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

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

【讨论】：

谢谢。错误：无法读取未定义的属性“值”
这里 - e.target.value
console.log(e) 查看e 中的内容。它必须是事件对象
console.log(e) - 显示输入值。但是它不会将数据存储在 form.dataEntrada
你已经相应地改变了你的突变，比如setValue(state, payload){ state.form.dataEntrada = payload }