如何在Vue 3组合式API中更新reactive()的默认值？Nuxt3异步数据场景下路由切换状态未更新问题求助

看起来你遇到的核心问题是路由切换时，异步请求没有重新触发，同时本地reactive状态没有和新的异步数据同步。咱们一步步拆解问题，然后给出解决方案：

问题根源分析 #

1. 请求未自动触发更新：你最初的代码里，projectName是初始化时获取的路由参数值，它不是响应式的——这意味着当路由切换后，useLazyFetch不会感知到projectName的变化，自然不会重新请求新的文章数据。
2. 状态未同步：state.title只在组件初始化时赋值了一次，后续异步数据更新后，没有任何机制把新的data.value.project.title同步到state里。

修正方案：让请求响应路由变化 + 同步状态 #

方案1：响应式请求 + Watch同步状态 #

直接利用route.params的响应式特性，让useLazyFetch自动追踪路由参数变化，再通过watch监听异步数据更新，同步到本地状态：

<script setup lang="ts">
const route = useRoute();

// 直接传入响应式的route.params.project，useLazyFetch会自动追踪这个依赖
// 路由切换时，参数变化会触发重新请求
const { pending, data } = useLazyFetch("/api/project", { 
  params: { name: route.params.project } 
});

const state = reactive({ 
  title: '' 
});

// 监听data的变化，同步到state.title
// immediate: true 确保组件初始化时就执行一次，填充初始值
watch(data, (newData) => {
  state.title = newData?.project?.title ?? '';
}, { immediate: true });
</script>

<template>
<div>
  <h1>{{ state.title }}</h1>
  <input v-model="state.title" />
</div>
</template>

方案2：使用可写Computed简化状态管理 #

如果你不需要单独的reactive对象，也可以用可写的computed直接绑定数据，这样更简洁：

<script setup lang="ts">
const route = useRoute();
const { pending, data } = useLazyFetch("/api/project", { 
  params: { name: route.params.project } 
});

// 可写computed：读取时从异步数据取，写入时可以自定义逻辑（比如保存到后端）
const title = computed({
  get() {
    return data.value?.project?.title ?? '';
  },
  set(newTitle) {
    // 这里可以添加更新后端的逻辑，比如调用API
    // 同时如果需要本地临时存储，也可以在这里处理
    console.log('准备更新标题:', newTitle);
  }
});
</script>

<template>
<div>
  <h1>{{ title }}</h1>
  <input v-model="title" />
</div>
</template>

为什么你的尝试没生效？ #

你之前用refresh的方法无效，主要是两个原因：

• projectName不是响应式的，watchEffect没有追踪到它的变化，所以不会触发后续逻辑；
• 即使调用了refresh，你也没有编写同步state.title的代码，所以状态还是停留在旧值。

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