vue.js - Connect third party vue component to vuex

Question

Is there a way to connect the complex v-model object to Vuex for a third-party Vue component?

My problem: I want to use this calendar component as a data range selector but I need to connect it to Vuex. The v-model object is complex. I care only about the start and end date: "dateRange":{"start":"2021-3-16","end":"2021-3-26"}

{"currentDate":"[native Date Thu Feb 04 2021 21:06:21 GMT+0100 (Central European Standard Time)]","selectedDate":false,"selectedDateTime":false,"selectedHour":"00","selectedMinute":"00","selectedDatesItem":"","selectedDates":[],"dateRange":{"start":"2021-3-16","end":"2021-3-26"},"multipleDateRange":[]}

question from:https://stackoverflow.com/questions/66053203/connect-third-party-vue-component-to-vuex

Answer 1

You do have a working example here: https://codesandbox.io/s/populate-vuex-with-vue-functional-calendar-5wj9m?file=/src/App.vue

Essentially, we:

• wait for an input on the calendar
• check if we have selected the end (and therefore the start) of the dateRange
• call a vuex action to populate the state
• you can see the state above the calendar

Since the code is not so big, here it is

<template>
  <div id="app">
    <p>range object in vuex: {{ $store.state.range }}</p>
    <functional-calendar @input="populateIfDoneSelecting" is-date-range></functional-calendar>
  </div>
</template>

<script>
import { FunctionalCalendar } from 'vue-functional-calendar'

export default {
  name: 'App',
  components: {
    FunctionalCalendar,
  },
  methods: {
    populateIfDoneSelecting(event) {
      // if we have an end, we do have a start, so no need to check start too here
      if (event.dateRange.end) {
        console.log('range done selecting', event.dateRange)
        this.$store.dispatch('populateRange', event.dateRange)
      }
    },
  },
}
</script>