Vue中的Nativescript时间选择器与Vuex

Question

我正在开发一个Nativescript-Vue应用程序，尝试使用Vuex存储Timepicker中的小时和分钟以在其他页面中使用。 我尝试使用计算属性来捕获事件，但是否有更好的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: {

  }
});

看起来默认值从 Store 中被成功地引入了组件，但是当在 picker 中更改时间时，计算函数的“set”部分从来没有触发，我也看不到我的 console.logs 输出。

我应该监听不同的 change 事件吗？这里的文档并没有详细说明。

谢谢您的帮助！

- Joe R.

---

你能提供“TimePicker”文档的链接吗？ - Phil

也许你可以尝试另一种方法，不使用计算属性，而是在created()生命周期方法中从存储中提取数据并将其分配给数据属性，然后添加watch监听数据属性的更改，如果它发生了变化，则将其提交到VueX存储。这提供了相同的行为，并且如果您无法使当前方法工作，则可以使用此方法。 - Ayudh

Answer 1

由于 Vue 中所有的 props 都是单向绑定的，Timepicker 的 props 只用于设置初始值。

相反，您可以使用 v-model 绑定与计算属性的 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())
    }
  }
}

- Phil

---

谢谢您，先生。使用v-model路由起作用了。我在使用@timeChange事件时遇到了问题，因为一直出现“payload”被转换为循环JSON结构的错误。 - Joe R.

文档对于事件载荷的信息非常缺乏。我很高兴v-model选项对你有用。 - Phil