Quasar项目集成Pinia Store后页面空白且显示异常默认内容

1. 确认Pinia在Quasar项目中正确注册 #

检查Quasar的boot文件（如src/boot/pinia.ts）是否正确初始化Pinia，并在quasar.config.js中启用该boot项：

// src/boot/pinia.ts
import { boot } from 'quasar/wrappers'
import { createPinia } from 'pinia'

export default boot(({ app }) => {
  app.use(createPinia())
})

2. 修复Pinia Store的数据更新逻辑 #

优化fetchData方法，避免直接修改原数组、规范state访问方式：

async fetchData () {
  try {
    this.loading = true
    const [projectRes, resourceRes, taskRes] = await Promise.all([
      axios.get('http://localhost:5000/api/projects'),
      axios.get('http://localhost:5000/api/resources'),
      axios.get('http://localhost:5000/api/tasks')
    ])
    
    const colours = ['#c1d2e6', '#8b7099', '#f49595', '#f6c094', '#ffebb0', '#a1c698']
    const shuffledColours = [...colours].sort(() => Math.random() - 0.5) // 避免修改原颜色数组
    
    // 清空旧数据防止重复
    this.projects = []
    this.resources = []
    this.tasks = []
    
    this.projects.push(...projectRes.data)
    this.resources.push(...resourceRes.data)
    this.tasks.push(...taskRes.data)

    this.projects.forEach((project, idx) => {
      project.duration = new Date(project.endDate).getDate() - new Date(project.startDate).getDate()
      project.colour = shuffledColours[idx % shuffledColours.length]
    })
    this.resources.forEach((resource, idx) => {
      resource.colour = shuffledColours[idx % shuffledColours.length]
    })
  } catch (err) {
    console.error('数据加载失败:', err)
    this.error = err instanceof Error ? err.message : '未知错误'
  } finally {
    this.loading = false
  }
}

3. 修复组件的响应式与数据加载问题 #

组件存在三个核心问题：未调用数据接口、响应式处理错误、日历配置非响应式，修复后代码如下：

<template>
  <div>
    <FullCalendar
      :options="options"
      style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 520px; width: 800px;"
    ></FullCalendar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { EventClickArg, Plugin } from '@fullcalendar/core'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import Swal from 'sweetalert2'
import dropDownButton from './dropDownButton.vue'
import { useApiStore } from '../stores/apiStore'
import { storeToRefs } from 'pinia'

const store = useApiStore()
const { projects } = storeToRefs(store) // 解构响应式state属性

// 将日历配置改为响应式对象
const options = ref({
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin] as Plugin[],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev, today, next',
    center: 'title',
    right: 'dayGridWeek, dayGridMonth, dayGridYear'
  },
  dropDownButton,
  weekends: true,
  events: [] as { 
    title: string; 
    start: string; 
    end: string; 
    allDay: boolean; 
    backgroundColor: string; 
    textColor: string; 
    borderColor: string; 
    extendedProps: { resources?: string[] } 
  }[],
  eventClick: function (info: EventClickArg) {
    Swal.fire({
      title: info.event.title,
      html: `
        <div>
          <strong>Zeitraum:</strong> <br/>${info.event.start?.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} - ${info.event.end?.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })}
        </div>
        <div>
          <strong>Resourcen:</strong><br>${info.event.extendedProps.resources?.join('<br>')}
        </div>
      `,
      icon: 'info',
      toast: true,
      background: info.event.backgroundColor,
      confirmButtonColor: '#536363',
      iconColor: '#536363',
      showCloseButton: true,
      showConfirmButton: false
    })
  }
})

const setProjectEvents = () => {
  if (!projects.value.length) return
  options.value.events = projects.value.map(project => ({
    title: project.name,
    extendedProps: { resources: project.resources?.map(r => `${r.surname} ${r.lastname}`) },
    start: project.startDate,
    end: project.endDate,
    allDay: true,
    backgroundColor: project.colour,
    textColor: '#000000',
    borderColor: project.colour
  }))
}

onMounted(async () => {
  await store.fetchData() // 先加载数据再生成日历事件
  setProjectEvents()
})

// 监听projects变化，自动更新日历
watch(projects, setProjectEvents, { deep: true })
</script>

4. 排查控制台错误 #

打开浏览器控制台（F12）查看具体报错：

• 若为CORS错误：在Quasar的quasar.config.js中配置代理，或后端开启跨域支持。
• 若为类型错误：检查Project、Resource等类型定义是否与接口返回数据结构匹配。

内容的提问来源于stack exchange，提问作者Ghazal Nikmanesh