Vuex - La propriété calculée "name" a été assignée à mais elle n'a pas de setter

Question

J'ai un composant avec une certaine validation de formulaire. Il s'agit d'un formulaire de paiement en plusieurs étapes. Le code ci-dessous est pour la première étape. Je voudrais valider que l'utilisateur a entré du texte, stocker son nom dans l'état global et ensuite l'envoyer à l'étape suivante. J'utilise vee-validate et 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>

J'ai un magasin pour gérer l'état de la commande et enregistrer le nom. En fin de compte, je voudrais envoyer toutes les informations du formulaire à plusieurs étapes au serveur.

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

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

    }
  },

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

Lorsque j'exécute ce code, j'obtiens une erreur selon laquelle Computed property "name" was assigned to but it has no setter.

Comment lier la valeur du champ nom à l'état global ? J'aimerais que cette valeur soit persistante, de sorte que même si un utilisateur revient en arrière d'une étape (après avoir cliqué sur "Étape suivante"), il verra le nom qu'il a saisi à cette étape.

Answer 1

Si vous allez v-model un calculateur, il a besoin d'un setter . Quel que soit ce que vous voulez qu'il fasse avec la valeur mise à jour (probablement l'écrire dans le fichier $store (étant donné que c'est de là que votre getter le tire) vous le faites dans le setter.

Si le retour au magasin se fait via la soumission d'un formulaire, vous ne voulez pas v-model vous voulez juste mettre :value .

Si vous voulez avoir un état intermédiaire, où il est sauvegardé quelque part mais n'écrase pas la source dans le fichier $store jusqu'à la soumission du formulaire, vous devrez créer un tel élément de données.

Answer 2

Ça devrait être comme ça.

Dans votre Composant

computed: {
        ...mapGetters({
                nameFromStore: 'name'
            }),
        name: {
           get(){
             return this.nameFromStore
           },
           set(newName){
             return newName
           } 
        }
    }

Dans votre magasin

export const store = new Vuex.Store({
         state:{
             name : "Stackoverflow"
         },
         getters: {
                 name: (state) => {
                     return state.name;
                 }
         }
}

Answer 3

Pour moi, c'était le changement.

this.name = response.data;

Ce qui est calculé revient ainsi ;

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

Answer 4

J'ai eu une erreur de ce type lorsque j'ai obtenu une valeur à partir de la fonction store en computed via ...mapState(['sampleVariable']) comme vous. Alors j'ai utilisé le this.sampleVariable en <script> y sampleVariable en <template> .

Ce qui a résolu le problème était de return ceci dans data() l'assigner à une variable séparée, et la réutiliser dans l'ensemble de l'échantillon. component la variable nouvellement créée, comme ceci :

data() {
  return {
    newVariable: this.$store.state.sampleVariable,
  }
}

Ensuite, j'ai changé les références dans le composant de sampleVariable a newVariable et l'erreur a disparu.

Answer 5

J'ai rencontré exactement la même erreur

La propriété calculée "callRingtatus" a été assignée mais elle n'a pas de setter.

Voici un exemple de code correspondant à mon scénario

computed: {

callRingtatus(){
            return this.$store.getters['chat/callState']===2
      }

}

Je modifie le code ci-dessus de la façon suivante

computed: {

callRingtatus(){
       return this.$store.state.chat.callState===2
    }
}

récupérer les valeurs de l'état du magasin vuex au lieu des getters dans le hook calculé