Ich habe eine Komponente mit einer Formularvalidierung. Es ist ein mehrstufiges Checkout-Formular. Der folgende Code ist für den ersten Schritt. Ich möchte überprüfen, ob der Benutzer Text eingegeben hat, seinen Namen im globalen Status speichern und dann zum nächsten Schritt senden. Ich benutze vee-validate und 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>
Ich habe ein Geschäft für die Bearbeitung des Bestellstatus und die Aufzeichnung des Namens. Letztendlich möchte ich alle Informationen aus dem Mehrschrittformular an den Server senden.
export default {
state: {
name: '',
},
mutations: {
UPDATE_ORDER_CONTACT(state, payload){
state.name = payload.name;
}
},
actions: {
addContactInfoForOrder({commit}, payload) {
commit('UPDATE_ORDER_CONTACT', payload);
}
}
}
Wenn ich diesen Code ausführe, wird eine Fehlermeldung angezeigt Computed property "name" was assigned to but it has no setter.
Wie binde ich den Wert aus dem Namensfeld an den globalen Status? Ich möchte, dass dies dauerhaft bleibt, damit ein Benutzer, selbst wenn er einen Schritt zurückgeht (nachdem er auf "Nächster Schritt" geklickt hat), den Namen sieht, den er in diesem Schritt eingegeben hat
quelle
v-for
auf einem Computer ohne Setter auch diese Warnung auslösen.Antworten:
Wenn Sie zu
v-model
einem Computer gehen, benötigt er einen Setter . Was auch immer Sie möchten, dass es mit dem aktualisierten Wert zu tun hat (wahrscheinlich schreiben Sie es in den$store
, wenn Sie bedenken, dass Ihr Getter es daraus zieht), tun Sie im Setter.Wenn das Zurückschreiben in den Store über das Senden von Formularen erfolgt, möchten Sie dies nicht
v-model
, sondern nur festlegen:value
.Wenn Sie einen Zwischenzustand haben möchten, in dem er irgendwo gespeichert ist, aber die Quelle in der
$store
Bis-Formular- Übermittlung nicht überschreibt , müssen Sie ein solches Datenelement erstellen.quelle
:value
vorbeiv-model
. Danke dir!Es sollte so sein.
In Ihrer Komponente
In deinem Laden
quelle
this.nameFromStore
direkt verwenden, können Sie die Daten nicht bearbeiten.Für mich hat sich das geändert.
Zu dem, was berechnet wird, kehrt so zurück;
quelle
Ich möchte nur erwähnen, warum diese Warnung angezeigt wird. Wenn wir einen berechneten Wert erstellen, der standardmäßig getter ist, müssen wir explizit Setter für berechnete Eigenschaften definieren.
wie in der Dokumentation von VueJs, Computed Setter erwähnt
Ihre berechnete Eigenschaft sieht folgendermaßen aus
Besser geeignet ist es,
mapState
den Namen aus dem Geschäft abzurufen und mit einer anderen Option den Getter in Ihrem Geschäft zu definieren undmapGetters
den Namen aus dem Geschäft zu extrahieren.Wichtig zu wissen: Getter im Speicher werden verwendet, wenn Sie berechnete Daten aus dem Speicher abrufen möchten. Zu diesem Zeitpunkt definieren Sie Logik in Gettern, mit denen Sie berechnete Daten erhalten
Beispiel für Getter
Dieser Getter überprüft Ihren Status auf aktiven Benutzer und gibt true zurück, wenn er angemeldet ist, und false, wenn er nicht angemeldet ist.
Später in der gesamten Anwendung
mapGetters
extrahieren wir dieseisLoggedIn
Eigenschaft und fügen dementsprechend Prüfungen hinzuhoffe jemand findet diese hilfe voll :)
quelle