将第三方 vue 组件连接到 vuex答案

【问题标题】：Connect third party vue component to vuex将第三方 vue 组件连接到 vuex
【发布时间】：2021-05-09 04:49:03
【问题描述】：

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

我的问题：我想使用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":[]}

【问题讨论】：

到目前为止你尝试了什么？您能否向我们提供有关您的行为以及您预期会发生什么的完整用户故事？
你试过询问仓库的所有者吗？
我的回答有帮助吗？

标签： vue.js vuex

【解决方案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>

【讨论】：