Vuex를 사용한 Nativescript Vue Timepicker

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의 기본값이 구성 요소에 제대로 적용되는 것처럼 보이지만 선택기에서 시간을 변경하면 계산 된 함수의 'set'부분이 실행되지 않고 console.logs가 실행되는 것을 볼 수 없습니다.

다른 변경 이벤트를 수신해야합니까? 여기에 있는 문서 는 이에 대해 자세히 다루지 않습니다.

도와 주셔서 감사합니다!

Answer 1

Vue의 모든 소품은 단방향 바운드이므로 Timepicker초기 값을 설정하는 데만 사용됩니다.

대신 저장소에서 읽고 쓰는 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())
    }
  }
}