将第三方 vue 组件连接到 vuex

Question

有没有办法将复杂的 v-model 对象连接到第三方 Vue 组件的 Vuex？

我的问题：我想使用 this calendar component 作为数据范围选择器，但我需要将它连接到 Vuex。 v-model 对象很复杂。我只关心开始和结束日期："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":[]}

Answer 1

你这里有一个有效的例子：https://codesandbox.io/s/populate-vuex-with-vue-functional-calendar-5wj9m?file=/src/App.vue

本质上，我们：

等待日历上的输入
检查我们是否选择了 dateRange

end

start

调用 vuex 操作来填充状态
日历上面可以看到状态

代码量不大，就到这里吧

<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>

将第三方 vue 组件连接到 vuex

Connect third party vue component to vuex

vue.js

vuex