オブジェクト内のネストされたプロパティを持つ2ウェイ・バインディング。 （VueJS + VueX）

Question

私は現在、下記のをやってる：

<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> 

は、私はそれを複雑に上ですか？ editingItemName set（）の2行目は、editingItem set（）関数をトリガーする回避策です。

Answer 1

Check this article。それはフォームに関するものですが、それはvuexとの双方向バインディングを実現する方法を示しています。

あなたの特別な場合については、コードを参照してください。 telephoneは、オブジェクト内のネストされたプロパティです。あなたはacheiveしようとしているものを

myModule.js

<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>