2-Wege-Datenbindung mit Vuex

Question

Im folgenden Code bin ich 2-Wege-Bindung der Ausgabe eines Textarea in ein p-Element, einmal aus dem internen Zustand der Komponente und einmal aus Vuex. Der Vuex-Status zeigt zwar den Anfangswert, aber der Wert wird nicht aktualisiert, wenn ich Text hinzufüge oder lösche (wie es korrekt mit dem ersten Textbereich geschieht, der an die internen Daten gebunden ist). Was ist der Unterschied, der dieses Problem verursacht?

Komponentencode:

<template> 
    <div> 
    <div> 
     <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="internal_state"></textarea> 
     <p> {{ internal_state }}</p> 
     <hr> 

     <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="this.$store.state.vuex_state"></textarea> 
     <p> {{ this.$store.state.vuex_state }}</p> 
     <hr> 

    </div> 
    </div> 
</template> 

<script> 

    export default { 
    name: 'WriteArea', 
    data() { 
     return { 
     internal_state: '' 
     } 
    }, 
    methods: { 


    } 
    } 

</script> 

Vuex Code:

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

export const store = new Vuex.Store({ 
    strict: true, 
    state: { 
    counter: 0, 
    vuex_state: 'starting string' 
    }, 
    getters: { 
    vuex_getter1: (state) => { 
     return state.vuex_string 
    } 
    } 
}) 

Answer 1

Vuex Staat sollte über eine Mutation aktualisiert werden. Genaue Informationen finden Sie in der Dokumentation. Die Lösung ist nicht v-Modell zu verwenden, sondern stattdessen auf die :value der textarea zu binden und dann ein benutzerdefiniertes Ereignis hat den Vuex Zustand auf Eingang mutieren: https://vuex.vuejs.org/en/forms.html

<input :value="message" @input="updateMessage"> 
// ... 
computed: { 
    ...mapState({ 
    message: state => state.obj.message 
    }) 
}, 
methods: { 
    updateMessage (e) { 
    this.$store.commit('updateMessage', e.target.value) 
    } 
} 

Die andere Option ist eine Setter zu erstellen und Getter in der gleichen berechneten Eigenschaft:

<input v-model="message"> 
// ... 
computed: { 
    message: { 
    get() { 
     return this.$store.state.obj.message 
    }, 
    set (value) { 
     this.$store.commit('updateMessage', value) 
    } 
    } 
}