Vue.js 2: Cant useTwo-Way Berechnete Eigenschaft in Kombination mit vuex

Question

Ich kann keine bidirektionale berechnete Eigenschaft in Kombination mit vuex erhalten, um zu arbeiten.

Wenn es Eingabeänderungen gibt, möchte ich getIsUnsavedData auf "true" setzen und die Änderungen in eine neue Variable "$store.state.authenticatedUser.changedData" "kopieren". Nach einer Änderung möchte ich den Wert get() seinen Wert von $store.state.authenticatedUser.changedData anstelle von $store.state.authenticatedUser.data, um die Änderung anzuzeigen.

Am Anfang funktioniert alles wie erwartet. Wenn Eingaben geändert werden, wird der geänderte Wert in der Eigenschaft $store.state.authenticatedUser.changedData repliziert. Der getIsUnsavedData Wert ändert sich in wahr und das get() verweist auf die replizierten Daten. Es gibt nur einen Fehler. Plötzlich ändert sich die berechnete Eigenschaft nicht, obwohl der vuex-Speicher korrekt aktualisiert wird. Die set() Funktion wird immer noch aufgerufen, aber die get() nicht.

<ui-textbox @change="valueChanged" v-model="userName"></ui-textbox> 
// ... 
    computed: { 
    userName: { 
     get() { 
     return this.$store.getters.getIsUnsavedData ? this.$store.state.authenticatedUser.changedData.name : this.$store.state.authenticatedUser.data.name 
     }, 
     set(value) { 
     this.$store.commit('setChangedUserData', { 
      key: 'name', 
      value: value 
     }) 
     } 
    } 
    }, 
    methods: { 
    valueChanged() { 
     this.$store.commit('setUnsavedState', true) 
    } 
    }, 
// .... 

Answer 1

V-Modell auf die Daten zeigen sollte, nicht einer berechneten Eigenschaft. Eine berechnete Eigenschaft liefert Daten und ist wie ein Getter für sich. Das Festlegen einer berechneten Eigenschaft ist wenig sinnvoll; es findet seinen eigenen Wert. Ich bin nicht sicher, wie diese Implementierung mit Vues eigener Reaktivitäts- und Abhängigkeitsverfolgung interagiert, aber ich vermute, dass dies die Ursache des Problems ist.

Bedenken Sie:

<ui-textbox v-model="userName"></ui-textbox>

// ... 
data() { 
    userName: null, 
}, 
computed: { 
    ...mapGetters([ 
    'userData', 
    ]), 
}, 
methods: { 
}, 
watch: { 
    userName() { 
    this.$store.commit('setChangedUserData', { 
     key: 'name', value: this.userName 
    }) 
    }, 
} 
// ... 

ich etwas fehlen könnte, was Sie tun, aber das ist, wie ich das Problem zu lösen beginnen würde.