Nuxt 3中useFetch与nuxt i18n模块联动问题求助

• 给useFetch添加包含locale的唯一key
  布局组件（如navbar、footer）中的useFetch默认只会在组件初始化时执行一次，切换locale时不会自动重新请求。你需要将当前locale作为useFetch的key的一部分，让Nuxt感知到依赖变化并重新发起请求。

  示例代码（Navbar组件）：

  <script setup>
  const { locale } = useI18n()
  const { data: categories } = useFetch('/api/categories', {
    key: ['navbar-categories', locale.value], // 将locale纳入请求key
    params: {
      lang: locale.value // 传递locale作为后端接口参数
    }
  })
  </script>
  

• 监听locale变化手动触发重新请求
  如果不想依赖key的变化，也可以通过watch监听locale的改变，手动调用useFetch返回的refetch方法。

  示例代码（Footer组件）：

  <script setup>
  const { locale } = useI18n()
  const { data: footerData, refetch } = useFetch('/api/footer', {
    params: {
      lang: locale.value
    }
  })
  
  // 监听locale切换事件，触发重新请求
  watch(locale, () => {
    refetch()
  }, { immediate: false })
  </script>
  

• 注意事项

  • 确保后端接口支持接收lang或对应参数，返回匹配当前语言的数据。
  • 若使用useAsyncData替代useFetch，逻辑完全一致，只需将locale加入依赖key或监听变化触发重新执行。

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