Vue.js Fullcalendar和Vuex
在fullcalendar更新了他们的道具以脱离Vue.js Fullcalendar和Vuex,vue.js,fullcalendar,state,vuex,Vue.js,Fullcalendar,State,Vuex,在fullcalendar更新了他们的道具以脱离元素之后,我在渲染事件时遇到了一些问题。 我知道状态请求在Vuex中得到了满足,因为我在没有getter和getter的情况下测试了这么多,但似乎什么都不起作用 <template> <v-container> <FullCalendar :options="calendarOptions" /> <li v-for="even
元素之后,我在渲染事件时遇到了一些问题。
我知道状态请求在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>
{{event.name+''+event.start}
从“@FullCalendar/vue”导入FullCalendar
从“@fullcalendar/daygrid”导入dayGridPlugin
从“@fullcalendar/interaction”导入interactionPlugin
从“@fullcalendar/timegrid”导入timeGridPlugin
从“@fullcalendar/list”导入listPlugin
从“vuex”导入{mapState、mapActions、MapGetter}
导出默认值{
组成部分:{
日历
},
数据(){
返回{
日历选项:{
插件:[timeGridPlugin,listPlugin,dayGridPlugin,interactionPlugin],
初始视图:“dayGridMonth”,
是的,
事件:此。allEvents,
}
}
},
计算:{
…地图状态({
事件:state=>state.calendar.events
}),
…映射器('calendar',['allEvents'),
},
创建(){
这个。getAll();
},
方法:{
…映射操作('日历'{
getAll:“getAll”,
}),
}
}
是否有任何方法仅使用状态渲染元素?我以为将events设置为this.events会起作用,但我可能离这里太远了。我是Vue和Vuex的新手,非常感谢您的帮助!:)列表只是为了知道状态正在正常工作。您仍然可以通过如下操作在模板中绑定事件:
<FullCalendar :options="{
...calendarOptions,
events: events
}" />
您仍然可以通过如下操作在模板中绑定事件:
<FullCalendar :options="{
...calendarOptions,
events: events
}" />
完美!我在医生里没找到,可能得去拿些眼镜。。您知道为什么它是通过在模板中绑定而不是在日历选项中绑定来工作的吗?使用getter还是仅仅映射状态更合适?这也适用于绑定@attributes吗?它允许您扩展对象、数组或字符串。数据道具在计算道具之前计算,因此尚未设置计算道具。您可以将getter视为存储中的计算属性,如果您想对使用getter的状态执行某些操作,如果您不想,则可以使用状态。感谢我需要的参考和深入解释!非常感谢你!完美的我在医生里没找到,可能得去拿些眼镜。。您知道为什么它是通过在模板中绑定而不是在日历选项中绑定来工作的吗?使用getter还是仅仅映射状态更合适?这也适用于绑定@attributes吗?它允许您扩展对象、数组或字符串。数据道具在计算道具之前计算,因此尚未设置计算道具。您可以将getter视为存储中的计算属性,如果您想对使用getter的状态执行某些操作,如果您不想,则可以使用状态。感谢我需要的参考和深入解释!非常感谢你!