Я не могу изменить данные ввода формы с помощью Vuex

Question

vuex не изменяет состояние хранилища vuex вне обработчиков мутаций

Я пытался что-то найти здесь, потому что ошибка очень распространена, но я пока не смог ее решить

Я пытаюсь создать форму с сохранением состояния с помощью vuex

Component

<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

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

Store

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

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

actions: {},

getters: {},

Answer 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
  };
}
},