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>