Vue.js 2:不能将双向计算属性与vuex结合使用
Vue.js 2:不能将双向计算属性与vuex结合使用
提问于 2017-05-07 05:18:43
我不能让双向计算的属性和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)
}
},
// ....
回答 2
Stack Overflow用户
发布于 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>Stack Overflow用户
发布于 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)
}
}
}我可能忽略了你正在做的一些事情，但这就是我开始解决问题的方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43825482
复制相关文章
相似问题