Vue 3项目使用Unhead出现inject()警告问题求助

useSeoMeta 是Unhead提供的Vue组合式函数，它内部依赖Vue的inject API获取head实例，但inject只能在<script setup>的顶级同步作用域或函数组件中调用——你把它放在onMounted异步钩子内执行，就触发了Vue的警告。

推荐使用响应式数据驱动useSeoMeta更新，这也是Unhead设计的最佳实践：

方法一：响应式自动更新（推荐） #

在<script setup>的顶级作用域调用useSeoMeta，传入一个返回meta配置的函数，利用Vue的响应式跟踪，当articleData加载完成后，meta标签会自动更新：

<script setup>
import { useSeoMeta } from '@unhead/vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import knowledgeAPI from '@/services/knowledgeAPI.js';

const route = useRoute();
const articleData = ref(null);

// 顶级作用域调用useSeoMeta，依赖响应式数据自动更新
useSeoMeta(() => ({
  title: articleData.value?.title || '文章加载中',
  ogTitle: articleData.value?.title || '文章加载中',
  twitterTitle: articleData.value?.title || '文章加载中',
  description: articleData.value?.summary || '正在获取文章内容',
  ogDescription: articleData.value?.summary || '正在获取文章内容',
  twitterDescription: articleData.value?.summary || '正在获取文章内容',
  ogImage: articleData.value?.img || '',
  twitterImage: articleData.value?.img || '',
  twitterCard: 'summary',
  ogSiteName: 'MySite'
}));

onMounted(async () => {
  articleData.value = await knowledgeAPI.getArticleById(route.params.id);
});
</script>

这里用?.可选链操作符避免数据未加载时出现undefined，同时设置默认值提升用户体验。

方法二：手动更新Meta标签 #

如果需要手动控制更新时机，可在顶级作用域获取head实例，再在异步钩子中调用patch方法更新：

<script setup>
import { useHead } from '@unhead/vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import knowledgeAPI from '@/services/knowledgeAPI.js';

const route = useRoute();
const articleData = ref(null);
// 顶级作用域获取head实例
const head = useHead();

onMounted(async () => {
  articleData.value = await knowledgeAPI.getArticleById(route.params.id);
  // 手动更新meta配置
  head.patch({
    title: articleData.value.title,
    meta: [
      { property: 'og:title', content: articleData.value.title },
      { name: 'twitter:title', content: articleData.value.title },
      { name: 'description', content: articleData.value.summary },
      { property: 'og:description', content: articleData.value.summary },
      { name: 'twitter:description', content: articleData.value.summary },
      { property: 'og:image', content: articleData.value.img },
      { name: 'twitter:image', content: articleData.value.img },
      { name: 'twitter:card', content: 'summary' },
      { property: 'og:site_name', content: 'MySite' }
    ]
  });
});
</script>

所有Vue组合式函数（以use开头的API）都必须遵循在<script setup>顶级作用域调用的规则，不能嵌套在异步钩子、普通函数或条件语句中，否则会触发类似的inject/ref相关警告。

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