![](/img/trans.png)
[英]NativeScript Vue - VueX not working: cannot read property getters of undefined
[英]Nativescript Vue Timepicker with Vuex
我正在开发一个 Nativescript-Vue 应用程序,我正在尝试使用 Vuex 来存储时间选择器中的小时和分钟,以便在其他页面中使用。 我已经尝试使用计算属性来捕获事件,但是有没有更好的方法来使用 Vue 来做到这一点?
这是我所拥有的:
// In NotifyTimePicker.vue (a custom Time-picking modal)
// Template:
<TimePicker row="2" col="0" colSpan="3" horizontalAlignment="center" :hour="selectedFromHour" :minute="selectedFromMinute" />
//Script
computed: {
selectedFromHour: {
get: function () {
return this.$store.state.notifyFromTimeHour
},
set: function (newValue) {
console.log(`Attempting to Update Store with new From Hour = ${newValue}`)
this.$store.commit('changeNotifyFromTimeHour', newValue)
}
},
selectedFromMinute: {
get: function () {
return this.$store.state.notifyFromTimeMinute
},
set: function (newValue) {
console.log(`Attempting to Update Store with new From Minute = ${newValue}`)
this.$store.commit('changeNotifyFromTimeMinute', newValue)
}
},
},
然后,在我的 Vuex 商店中:
export default new Vuex.Store({
state: {
notifyFromTimeHour: 9,
notifyFromTimeMinute: 30,
},
mutations: {
changeNotifyFromTimeHour (state, hour) {
state.notifyFromTimeHour = hour
},
changeNotifyFromTimeMinute (state, minute) {
state.notifyFromTimeMinute = minute
},
},
actions: {
}
});
似乎商店的默认值被很好地拉入组件,但是当更改选择器中的时间时,计算的 function 的“设置”部分永远不会触发,我也从未看到我的 console.logs 触发。
我应该听不同的变化事件吗? 此处的文档没有 go 详细介绍这一点。
谢谢您的帮助!
由于 Vue 中的所有道具都是单向绑定的,因此Timepicker
道具仅用于设置初始值。
相反,您可以将v-model
绑定与计算的getter和setter结合使用,这些 getter 和 setter 从您的商店读取/写入
<TimePicker
row="2"
col="0"
colSpan="3"
horizontalAlignment="center"
v-model="selectedTime"
/>
export default {
computed: {
selectedTime: {
get () {
const time = new Date()
time.setHours(
this.$store.state.notifyFromTimeHour,
this.$store.state.notifyFromTimeMinute)
return time
},
set (time) {
this.$store.commit('changeNotifyFromTimeHour', time.getHours())
this.$store.commit('changeNotifyFromTimeMinute', time.getMinutes())
}
}
}
}
或者,要监听更新,您需要使用timeChange
事件
<TimePicker
row="2"
col="0"
colSpan="3"
horizontalAlignment="center"
:hour="selectedFromHour"
:minute="selectedFromMinute"
@timeChange="changeTime"
/>
import { mapState } from "vuex"
export default {
computed: mapState({
selectedFromHour: "notifyFromTimeHour",
selectedFromMinute: "notifyFromTimeMinute"
}),
methods: {
changeTime (payload) {
// documentation doesn't say what the event payload is, let's assume it's a Date
this.$store.commit('changeNotifyFromTimeHour', payload.getHours())
this.$store.commit('changeNotifyFromTimeMinute', payload.getMinutes())
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.