2 Wegbindung mit einer verschachtelten Eigenschaft innerhalb des Objekts. (VueJS + VueX)

Question

Ich mache zur Zeit die folgenden:

<script> 
export default { 
    computed: { 
    editingItem: { 
     get() { 
     return this.$store.getters['editing/editingItem']; 
     }, 
     set(newValue) { 
     this.$store.commit('editing/UPDATE_EDITING', newValue); 
     } 
    }, 
    editingItemName: { 
     get() { 
     return this.editingItem.name; 
     }, 
     set(newValue) { 
     this.editingItem.name = newValue; 
     this.editingItem = this.editingItem; 
     } 
    } 
    }, 
} 
</script> 

Bin ich es über komplizieren? Die zweite Zeile in editItemName set() ist eine Problemumgehung, um die Funktion editItem set() auszulösen.

Answer 1

Check this article. es geht um Formen, aber es zeigt den Weg, um mit Vuex zu 2-Wege-Bindung zu erreichen.

zu Ihrem speziellen Fall, siehe den Code. telephone ist eine verschachtelte Eigenschaft in einem Objekt.

myModule.js

const myModule = { 
    state: { 
    customerInfo: { 
     name: '', 
     telephone: '' 
    } 
    }, 
    getters: { 
    getTelephone(state) { 
     return state.customerInfo.telephone 
    } 
    }, 
    mutations: { 
    setTelephone(state, payload) { 
     state.customerInfo.telephone += payload 
    }, 
    } 
} 
export default myModule; 

form.vue

<template> 
    <div> 
    <input v-model="telephone"></input> 
    </div> 
</template> 

<script> 
export default { 
    computed: { 
    telephone: { 
     get() { 
     return this.$store.getters['getTelephone'] 
     }, 
     set(value) { 
     this.$store.commit('setTelephone', value) 
     } 
    }, 
    } 
} 
</script>