Fullcalendar 和 Vuex

Question

在 fullcalendar 更新他们的道具以超出 <FullCalendar /> 元素之后，我在渲染事件时遇到了一些问题。 我知道状态请求在 Vuex 中得到了满足，因为我已经在没有 getter 和 getter 的情况下测试了这么多，但似乎没有任何工作......

<template>
<v-container>
            <FullCalendar :options="calendarOptions" />

            <li v-for="event in events" :key="event.id"> 
                {{event.name + ' ' + event.start}}
            </li>
</v-container>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'

import { mapState, mapActions, mapGetters } from 'vuex'


export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [timeGridPlugin, listPlugin ,dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        selectable: true,
        events: this.allEvents,
      }
    }
  },
   computed: {
        ...mapState({
            events: state => state.calendar.events
        }),
        ...mapGetters('calendar', ['allEvents']),
    },
    created () {
      this.getAll();
    },
    methods: {
        ...mapActions('calendar', {
            getAll: 'getAll',
        }),
    }
}
</script>

有没有办法只用状态来渲染元素？我认为将事件设置为 this.events 会起作用，但我可能离这里很远。我是 Vue 和 Vuex 的新手，非常感谢您的帮助！ :) 该列表只是为了知道该状态正在按应有的方式工作。

Answer 1

您仍然可以通过执行以下操作来绑定模板中的事件：

<FullCalendar :options="{
  ...calendarOptions,
  events: events
}" />