Nativescript Vue Timepicker, Vuex ile

Question

Nativescript-Vue uygulaması üzerinde çalışıyorum ve Vuex'i diğer Sayfalarda kullanmak üzere bir Zaman Seçiciden saat ve dakikayı saklamak için kullanmaya çalışıyorum. Olayı hesaplanmış bir özellik ile yakalamaya çalıştım, ancak bunu Vue ile yapmanın daha iyi bir yolu var mı?

İşte sahip olduğum şey:

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

Ardından, Vuex mağazamda:

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

  }
});

Mağazadaki varsayılan değerler bileşene gayet iyi çekiliyor gibi görünüyor, ancak seçicide zamanı değiştirirken, hesaplanan işlevin 'ayarlı' kısmı asla ateşlenmiyor ve konsolumun çalıştığını asla görmüyorum.

Farklı bir değişim olayını mı dinlemeliyim? Dokümantasyon burada bu kadar detaya gitmez.

Yardım için teşekkürler!

Answer 1

Vue'daki tüm sahne öğeleri tek yönlü olarak bağlandığından, Timepickersahne yalnızca başlangıç ​​değerlerini ayarlamak için kullanılır.

Bunun yerine, mağazanızdan okuyan / yazan v-modelbir hesaplanmış alıcı ve ayarlayıcı ile bir bağlama kullanabilirsiniz .

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

---

Alternatif olarak, güncellemeleri dinlemek için etkinliği kullanmanız gerekir.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())
    }
  }
}