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（）的第二行是解決方法，使editItem set（）函數觸發。

Answer 1

Check this article。它是關於表單的，但是它展示了用vuex實現雙向綁定的方法。

關於您的特殊情況，請參閱代碼。 telephone是對象內部的嵌套屬性。

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>