2 方式与嵌套 属性 内部对象绑定。 (VueJS + VueX)
2 way-binding with a nested property inside object. (VueJS + VueX)
我目前正在执行以下操作:
<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() 的第二行是触发 editingItem set() 函数的解决方法。
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>
我目前正在执行以下操作:
<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() 的第二行是触发 editingItem set() 函数的解决方法。
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>