Nativecript Vue Timepicker với Vuex

Question

Tôi đang làm việc trên ứng dụng Nativecript-Vue và tôi đang cố gắng sử dụng Vuex để lưu trữ giờ và phút từ Timepicker để sử dụng trong các Trang khác. Tôi đã thử bắt sự kiện với một thuộc tính được tính toán, nhưng có cách nào tốt hơn để làm điều này với Vue không?

Đây là những gì tôi có:

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

Sau đó, trong cửa hàng Vuex của tôi:

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

  }
});

Có vẻ như các giá trị mặc định từ Store được kéo vào thành phần rất tốt, nhưng khi thay đổi thời gian trong bộ chọn, phần 'set' của hàm được tính toán không bao giờ kích hoạt và tôi không bao giờ thấy console.logs của mình kích hoạt.

Tôi có nên lắng nghe một sự kiện thay đổi khác không? Tài liệu ở đây không đi sâu vào chi tiết về điều này.

Cảm ơn đã giúp đỡ!

Answer 1

Vì tất cả các đạo cụ trong Vue đều bị ràng buộc một chiều nên các Timepickerđạo cụ chỉ được sử dụng để đặt giá trị ban đầu.

Thay vào đó, bạn có thể sử dụng một v-modelràng buộc với getter và setter được tính toán để đọc / ghi vào cửa hàng của bạn

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

---

Ngoài ra, để nghe cập nhật, bạn cần sử dụng timeChangesự kiện

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