Nativescript Vue Timepicker dengan Vuex

Question

Saya sedang mengerjakan aplikasi Nativescript-Vue, dan saya mencoba menggunakan Vuex untuk menyimpan jam dan menit dari Timepicker untuk digunakan di Halaman lain. Saya sudah mencoba menangkap acara dengan properti yang dihitung, tetapi adakah cara yang lebih baik untuk melakukan ini dengan Vue?

Inilah yang saya miliki:

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

Kemudian, di toko Vuex saya:

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

  }
});

Tampaknya nilai default dari Store ditarik ke dalam komponen dengan baik, tetapi ketika mengubah waktu di picker, bagian 'set' dari fungsi yang dihitung tidak pernah aktif, dan saya tidak pernah melihat console.logs saya aktif.

Haruskah saya mendengarkan acara perubahan yang berbeda? Dokumentasi di sini tidak terlalu detail.

Terima kasih untuk bantuannya!

Answer 1

Karena semua props di Vue terikat satu arah, Timepickerprops hanya digunakan untuk menetapkan nilai awal.

Sebagai gantinya, Anda bisa menggunakan v-modelbinding dengan getter dan setter yang dihitung yang membaca dari / menulis ke toko Anda

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

---

Atau, untuk mendengarkan pembaruan, Anda perlu menggunakan timeChangeacara tersebut

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