Wie man Eingabefeld bindet und vuex Zustand zur gleichen Zeit

Question

Im kommt von einem React Hintergrund und es ist einfach genug, um Ihren Zustand von einer Stütze zu setzen und Sie könnten setState({...}) anrufen, um den Zustand zu aktualisieren, also, mit vue/vuex, I es schwierig finden.

Zur Vereinfachung:

Vuex Staat

name: "Foo bar"

Vuex Aktion

addName

Ich kann kein Problem, den Zustand ändern, aber ich brauche ein binden Eingabefeld und bei Änderung wird der Status aktualisiert. Stellen Sie sich dies als ein Update-Formular vor, bei dem die Benutzerdetails bereits ausgefüllt sind und sie ihren Namen ändern können.

<input @change="addName(newName) v-model="newName" /> 

konnte ich ein watch beobachten für newName hinzufügen und den Zustand zu aktualisieren, aber ich brauche die Eingabe mit dem Staat im Voraus zu füllen. Ha! Ich könnte beforeMount() verwenden, aber mein Zustand ist noch nicht geladen.

computed: { 
    ...mapState([ 
    'name' 
    ]), 
}, 
beforeMount() { 
    // this.newName = this.name 
    console.log('Mounted') // Shows in console 
    console.log(this.name) // nothing 
} 

Namen zeigt in templete <pre>{{ name }}</pre>

Answer 1

Yo computed setter

computed:{ 
    name:{ 
     get: function(){ 
      return store.state.name; 
     }, 
     set: function(newName){ 
      store.dispatch('addName',newName); 
     } 
    } 
} 
enter code here 

verwenden können, und stellen Sie die v-model auf die berechnete Eigenschaft name in Ihrem <input> tag:

<input v-model="name" />

Hier ist die Arbeit jsfiddle