Vuex-Propiedad calculada "nombre" fue asignado a pero no tiene setter


Tengo un componente con alguna validación de formulario. Es un formulario de pago de varios pasos. El siguiente código es para el primer paso. Me gustaría validar que el usuario haya introducido 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 pasos múltiples 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 corro esto código Me sale un error que Computed property "name" was assigned to but it has no setter.

¿Cómo enlazo el valor del campo 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") vea el nombre que ingresó en este paso

Author: Connor Leech, 2017-09-08

2 answers

Si vas a v-model a computado, necesita un setter. Lo que quieras que haga con el valor actualizado (probablemente escribirlo en el $store, teniendo en cuenta que es de lo que tu getter lo extrae) lo haces en el setter.

Si escribirlo de nuevo en la tienda ocurre a través del envío de formularios, 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 el $store hasta el formulario envío, tendrá que crear un elemento de datos de este tipo.

 60
Author: Roy J,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-07 23:32:32

`

computed: {
            isSubmitAttemped() {
                return Object.keys(this.fields).every(field => {
                    return this.fields[field] && this.fields[field].valid;
                });
            }
        }

<button class="btn btn-warning btn-block" v-bind:disabled="!isSubmitAttemped" >Login</button>

`

 1
Author: Deepak Kr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-19 10:35:00