我不能让双向计算的属性和vuex一起工作。
如果存在输入更改,我希望将getIsUnsavedData
设置为true,并将更改"copy"/commit到新的变量$store.state.authenticatedUser.changedData
中。在有任何更改之后,我希望输入从$store.state.authenticatedUser.changedData
中get()
它的值,而不是$store.state.authenticatedUser.data
来显示更改。
乍一看,一切都和预期的一样。如果存在输入更改,则会在$store.state.authenticatedUser.changedData
属性中复制更改后的值。Get值变为true,getIsUnsavedData
()指向复制的数据。只剩下一个bug了。突然之间,尽管vuex存储正确地更新了,但计算的属性永远不会改变。set()
函数仍然会被调用,但get()
不会。
<ui-textbox @change="valueChanged" v-model="userName"></ui-textbox>
// ...
computed: {
userName: {
get() {
return this.$store.getters.getIsUnsavedData ? this.$store.state.authenticatedUser.changedData.name : this.$store.state.authenticatedUser.data.name
},
set(value) {
this.$store.commit('setChangedUserData', {
key: 'name',
value: value
})
}
}
},
methods: {
valueChanged() {
this.$store.commit('setUnsavedState', true)
}
},
// ....
发布于 2018-06-09 08:20:35
尝试使用我的库
https://github.com/yarsky-tgz/vuex-dot
它是针对这样的情况而做的,以减少代码中setter/getter的代码占用空间。
<template>
<form>
<input v-model="name"/>
<input v-model="email"/>
</form>
</template>
<script>
import { takeState } from 'vuex-dot';
export default {
computed: {
...takeState('user')
.expose(['name', 'email'])
.dispatch('editUser')
.map()
}
}
</script>
发布于 2017-05-07 10:11:45
(更新以反映Andor的输入)
v-model可以指向计算属性,但它需要处理的工作与仅引用数据时略有不同。
应用有关双向计算属性的部分:
<ui-textbox v-model="userName"></ui-textbox>
// ...
computed: {
userName: {
get () {
return this.$store.state.obj.userName
},
set (value) {
this.$store.commit('updateUserName', value)
}
}
}
我可能忽略了你正在做的一些事情,但这就是我开始解决问题的方法。
https://stackoverflow.com/questions/43825482
复制相似问题