vue.js - variable - Vuex: se asignó el "nombre" de la propiedad calculada pero no tiene configurador

vuex read state

Question

Tengo un componente con alguna validación de formulario. Es un formulario de pago de múltiples pasos. El siguiente código es para el primer paso. Me gustaría validar que el usuario ingresó algún texto, almacenar su nombre en el estado global y luego enviarlo al siguiente paso. Estoy usando vee-validate y vuex

<template>
<div>
    <div class=''field''>
        <label class=''label'' for=''name''>Name</label>
        <div class="control has-icons-right">

            <input name="name" v-model="name" v-validate="''required|alpha''" :class="{''input'': true, ''is-danger'': errors.has(''name'') }" type="text" placeholder="First and Last">
            <span class="icon is-small is-right" v-if="errors.has(''name'')">
                <i class="fa fa-warning"></i>
            </span>
        </div>
        <p class="help is-danger" v-show="errors.has(''name'')">{{ errors.first(''name'') }}</p>

    </div>
    <div class="field pull-right">
        <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button>
    </div>
</div>
</template>

<script>
export default {
    methods: {
        nextStep(){
            var self = this;

            // from baianat/vee-validate
            this.$validator.validateAll().then((result) => {
                if (result) {
                    this.$store.dispatch(''addContactInfoForOrder'', self);
                    this.$store.dispatch(''goToNextStep'');
                    return;
                }
            });
        }
    },
    computed: {
        name: function(){
            return this.$store.state.name;
        }
    }
}
</script>

Tengo una tienda para manejar el estado del pedido y registrar el nombre. En última instancia, me gustaría enviar toda la información del formulario de varios pasos al servidor.

export default {
  state: {
    name: '''',
  },

  mutations: {
    UPDATE_ORDER_CONTACT(state, payload){
      state.name = payload.name;

    }
  },

  actions: {
    addContactInfoForOrder({commit}, payload) {
      commit(''UPDATE_ORDER_CONTACT'', payload);
    }
  }
}

Cuando ejecuto este código, aparece un error al que Computed property "name" was assigned to but it has no setter.

¿Cómo enlazo el valor del campo de nombre al estado global? Me gustaría que esto sea persistente para que incluso si un usuario retrocede un paso (después de hacer clic en "Siguiente paso") verá el nombre que ingresó en este paso

Answer 1

Para mí estaba cambiando.

this.name = response.data;

A lo que se calcula vuelve así;

this.$store.state.name = response.data;

Answer 2

Si vas a v-model en v-model un cómputo, necesita un setter . Sea lo que sea que quiera que haga con el valor actualizado (probablemente escríbalo en la $store , teniendo en cuenta que es lo que obtiene su captador) lo que hace en el setter.

Si volver a escribirlo en la tienda se realiza mediante el envío de un formulario, no desea v-model , solo desea establecer :value .

Si desea tener un estado intermedio, donde se guarda en algún lugar pero no sobrescribe la fuente en $store hasta el envío del formulario, deberá crear dicho elemento de datos.