vue-meta 3使用metaInfo报this undefined 如何通过API实现动态元数据

vue-meta 3.x 版本已完全废弃 2.x 版本的metaInfo组件配置项，相关API全部重构为组合式函数useMeta，旧写法不再被框架识别，因此会出现上下文丢失、this is undefined的报错。

1. 修复全局注册逻辑 #

你的app.js中存在重复注册插件的问题，vue-meta 3仅需注册一次metaManager实例即可，修正代码如下：

import { createApp } from 'vue'
import Axios from 'axios'
import { createMetaManager } from 'vue-meta'

const app = createApp({
    components: {
        // 你的组件注册逻辑
    }
})
app.use(createMetaManager())

2. 组件动态元数据实现 #

vue-meta 3仅支持通过useMetaAPI声明元数据，传入响应式参数即可实现动态更新，以下提供两种适配方案：

方案1：最小改动适配现有逻辑 #

无需大规模重构现有业务代码，仅新增setup块声明元数据即可，原有生命周期逻辑可保留：

import { useMeta, computed, ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const productName = ref('')
    // 声明动态元数据，computed包裹后会自动响应数据变化
    useMeta(computed(() => ({
      title: productName.value ? `product : ${productName.value}` : 'product'
    })))
    return { productName }
  },
  mounted() {
      axios.post('/get_product_name').then((response)=>{
          this.productName = response.data.product_name
      })
  }
}

方案2：标准Composition API实现（推荐） #

完全符合Vue3和vue-meta 3的开发规范，性能更优：

import { useMeta } from 'vue-meta'
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const productName = ref('')
    
    // 动态元数据配置，依赖productName自动更新
    useMeta(computed(() => ({
      title: productName.value ? `product : ${productName.value}` : 'product'
    })))

    // 接口请求逻辑
    onMounted(() => {
      axios.post('/get_product_name').then((response)=>{
        productName.value = response.data.product_name
      })
    })

    return {
      productName
    }
  }
}

useMeta支持传入普通对象、ref对象、计算属性、返回元数据对象的函数四种参数格式，只要参数是响应式的，元数据就会跟随依赖自动同步更新，无需额外手动触发刷新。

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