这是来自vue组件的计算getter和setter:
paidStartHours : {
get() {
return moment(this.position.paid_start, global.DB_DATETIME).format('HH');
},
set(value) {
this.$store.commit({
type : 'updatePaidStartHours',
newValue : value,
position : this.position
});
}
}
在get上,它返回 position.paid_start
的小时数(HH) . 在set上,它提交了一个商店变异,它实质上为 position.paid_start
重新创建了时间字符串 .
In绑定(双向)输入如下:
<input v-model="paidStartHours" type="text">
在初始加载时,计算属性 paidStartHours
是正确的(根据Vue工具) .
但是,当我更新输入时, paidStartHours
的值不会改变 . 我知道提交是成功的,因为传递给组件的道具是正确的 . 对我来说完全是无稽之谈 .
编辑:
updatePaidStartHours
突变中的代码已经多次更改 . 例如,我试过这个:
updatePaidStartHours(state, payload) {
payload.position.paid_start = 999;
}
传递的道具的值变为999,但计算的道具的值保持不变 .
编辑二:
我认为不值得尝试解决这个问题,因为我认为我的整个Vue / Webpack / Node安装非常恶心 . 例如,今天早上我高兴地按照这个答案Vuejs and Webpack: Why is store undefined in child components将一个实例化的商店导入我的应用程序 . 这一切看起来都很好,但经过约8小时的填充后,我发现没有商店属性是反应性的 . 我只恢复导入配置,现在我的大多数商店属性都是被动的,但遗憾的是不是上面的那些 . 我想我需要放弃这种方法,直到我有时间重新审视吹掉我的Vue / Webpack / Node安装并重新开始 .
1 回答
应该仅从Vuex操作调用Vuex突变 - 因此在您的代码中,您应该发送操作,而不是突变 . 此外,您的突变函数有望改变
store
参数 - 而不是payload
参数 . 你的getter也是错的 - 它应该使用this.$store.getters
而不是你的本地组件数据 .Vuex模块: