Connect third party vue component to vuex

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>