页面刷新时Vue组件Prop短暂undefined的问题及解决方案咨询

页面刷新时，Pinia仓库的todos数据可能尚未完成加载（比如从后端异步获取），导致父组件通过computed计算出的todo初始值为undefined，子组件初始化时直接访问props.todo.id就会触发类型错误。而通过router-link导航时，仓库数据已存在，所以不会出现该问题。

以下是几种可行的解决方法：

方案一：子组件中添加props校验+可选链+监听更新 #

给todo props设置默认空对象，用可选链避免直接访问undefined属性，同时监听props变化同步更新表单状态：

<script setup>
import { reactive, watch } from 'vue';

const props = defineProps({
  todo: {
    type: Object,
    default: () => ({})
  }
})

// 初始化时用可选链防止报错
const formState = reactive({
  id: props.todo?.id || '',
  content: props.todo?.content_en || '',
  bookmarked: props.todo?.bookmarked || false,
  completed: props.todo?.completed || false,
  date_deadline: props.todo?.date_deadline || ''
})

// 监听todo变化，实时更新表单
watch(() => props.todo, (newTodo) => {
  if (newTodo) {
    formState.id = newTodo.id
    formState.content = newTodo.content_en
    formState.bookmarked = newTodo.bookmarked
    formState.completed = newTodo.completed
    formState.date_deadline = newTodo.date_deadline
  }
}, { immediate: true })
</script>

方案二：父组件延迟渲染子组件 #

只有当todo存在时才渲染子组件，避免传递undefined：

<template>
  <SingleTodoComponent v-if="todo" :todo="todo"></SingleTodoComponent>
  <!-- 可选：添加加载提示 -->
  <div v-else>加载中...</div>
</template>

方案三：确保Pinia仓库数据提前加载 #

如果todos是异步获取的，在仓库初始化时自动加载数据，保证页面刷新时数据已存在：

// stores/todosStore.js
import { defineStore } from 'pinia'

export const useTodos = defineStore('todos', {
  state: () => ({
    todos: []
  }),
  actions: {
    async fetchTodos() {
      // 替换为实际的后端请求
      const res = await fetch('/api/todos')
      this.todos = await res.json()
    }
  },
  // 页面加载时自动触发数据加载
  async setup() {
    await this.fetchTodos()
  }
})

同时父组件可等待数据加载完成后再渲染：

<script setup>
import { useRoute } from 'vue-router'
import { computed, onMounted } from 'vue';
import SingleTodoComponent from '@/components/SingleTodoComponent.vue';
import { useTodos } from '@/stores/todosStore';

const route = useRoute()
const todosStore = useTodos()
let isLoaded = false

onMounted(async () => {
  // 若仓库无数据，手动触发加载
  if (todosStore.todos.length === 0) {
    await todosStore.fetchTodos()
  }
  isLoaded = true
})

const todo = computed(() => {
  if (!isLoaded) return null
  return todosStore.todos.find(t => t.id === parseInt(route.params.todoId))
})
</script>

<template>
  <SingleTodoComponent v-if="todo" :todo="todo"></SingleTodoComponent>
  <div v-else>加载中...</div>
</template>

方案四：子组件用toRefs结合watch监听 #

将props转为响应式引用，再监听变化初始化表单：

<script setup>
import { reactive, watch, toRefs } from 'vue';

const props = defineProps(['todo'])
const { todo } = toRefs(props)

const formState = reactive({
  id: '',
  content: '',
  bookmarked: false,
  completed: false,
  date_deadline: ''
})

// 监听todo变化，同步表单状态
watch(todo, (newTodo) => {
  if (newTodo) {
    Object.assign(formState, {
      id: newTodo.id,
      content: newTodo.content_en,
      bookmarked: newTodo.bookmarked,
      completed: newTodo.completed,
      date_deadline: newTodo.date_deadline
    })
  }
}, { immediate: true })
</script>

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