如何在Nuxt 3中使用插件实现异步数据获取并渲染？

你遇到的"[object Promise]"问题，本质是$translate是异步函数，模板中直接调用会输出Promise对象本身，而非异步请求返回的实际结果。下面是几种可行的解决方法：

方法一：使用useAsyncData（Nuxt3官方推荐） #

useAsyncData是Nuxt3专为异步数据获取设计的组合式API，它会自动处理加载状态，并且支持服务端预渲染，适合需要SEO的场景。

修改app.vue代码如下：

<template>
  <div>{{ translation }}</div>
</template>

<script setup lang="ts">
const { $translate } = useNuxtApp()

// 用useAsyncData封装异步请求，第一个参数是唯一key用于缓存
const { data: translation } = await useAsyncData('translation-1', () => $translate('1'))
</script>

方法二：组件内用ref结合异步逻辑 #

如果不需要服务端预渲染，可以手动通过ref存储数据，在组件挂载后发起异步请求：

<template>
  <div>{{ translation }}</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const { $translate } = useNuxtApp()

const translation = ref('')

onMounted(async () => {
  // 等待异步请求完成后更新数据
  translation.value = await $translate('1')
})
</script>

方法三：优化插件，添加缓存避免重复请求 #

如果翻译数据会被多次调用，可以在插件中添加缓存机制，减少重复的API请求：

修改myplugin.ts：

export default defineNuxtPlugin(async (nuxtApp) => {
  // 用Map存储已加载的翻译数据，避免重复请求
  const translationCache = new Map()

  async function loadData(translate_id: string){
    if (translationCache.has(translate_id)) {
      return translationCache.get(translate_id)
    }
    // 模板字符串拼接更简洁
    const data = await $fetch(`/api/translation/?translation_id=${translate_id}&language=de`, {
      method: 'GET',
    })
    translationCache.set(translate_id, data)
    return data
  }

  return {
    provide: {
      translate: async (translate_id: string) => await loadData(translate_id)
    }
  }
})

优化后的插件配合前两种方法使用，能有效提升性能。

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