Nativescript Vue Timepicker mit Vuex

Question

Ich arbeite an einer Nativescript-Vue-App und versuche, mit Vuex die Stunden und Minuten eines Timepickers zu speichern, um sie auf anderen Seiten zu verwenden. Ich habe versucht, das Ereignis mit einer berechneten Eigenschaft abzufangen, aber gibt es eine bessere Möglichkeit, dies mit Vue zu tun?

Folgendes habe ich:

// 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)
        }
      },
    },

Dann in meinem Vuex-Laden:

export default new Vuex.Store({
  state: {
    notifyFromTimeHour: 9,
    notifyFromTimeMinute: 30,
  },
  mutations: {
    changeNotifyFromTimeHour (state, hour) {
      state.notifyFromTimeHour = hour
    },
    changeNotifyFromTimeMinute (state, minute) {
      state.notifyFromTimeMinute = minute
    },
  },
  actions: {

  }
});

Es scheint, dass die Standardwerte aus dem Store problemlos in die Komponente übernommen werden. Wenn Sie jedoch die Zeit in der Auswahl ändern, wird der Teil 'set' der berechneten Funktion nie ausgelöst, und ich sehe nie, dass meine console.logs ausgelöst werden.

Sollte ich mir ein anderes Änderungsereignis anhören? Die Dokumentation hier geht nicht so sehr ins Detail.

Danke für die Hilfe!

Answer 1

Da alle Requisiten in Vue in eine Richtung gebunden sind, werden die TimepickerRequisiten nur zum Festlegen von Anfangswerten verwendet.

Stattdessen können Sie eine v-modelBindung mit einem berechneten Getter und Setter verwenden, die aus Ihrem Geschäft liest / in dieses schreibt

<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())    
      }
    }
  }
}

---

Um auf Updates zu warten, müssen Sie alternativ das timeChangeEreignis verwenden

<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())
    }
  }
}