NuxtJS 自定义mixin访问story对象报content属性未定义问题

• Vue 同生命周期钩子的 mixin 执行顺序为先引入先执行，但你使用的 FetchData Mixin 内部依赖 fetch/asyncData 等异步逻辑获取 story 数据，异步请求不会阻塞 head 方法的执行，首次触发 head 时 story 还未完成赋值，本质就是 undefined。
• 你之前只打印 this.story 没有报错，是浏览器控制台对引用类型的打印做了懒加载处理：打印时虽然值是 undefined，但等后续异步请求完成数据赋值后，你展开控制台打印的内容会读取最新的引用值，让你误以为首次执行 head 时就已经拿到了 story。只有当你尝试访问 undefined 的子属性时，才会直接抛出异常，也就出现了“加了属性访问后连打印都变成 undefined”的错觉。
• 额外补充：Nuxt 的 head 方法会在服务端、客户端各执行一次，服务端执行时如果异步数据还未挂载到实例上，也会触发空值报错。

1. 增加空值兼容判断，避免空值抛出异常，这是成本最低的修复方案：

export default () => {
  return {
    head () {
      console.log(this.story)
      // 可选链写法，低版本项目可以换成短路判断：this.story && this.story.content && this.story.content.title
      const title = this.story?.content?.title || '默认页面标题'
      console.log(title)
      return {
        title: title
        // 其他 meta 配置
      }
    }
  }
}

2. 调整数据获取逻辑，确保 head 执行前数据已经就绪：把 FetchData 中获取 story 的逻辑迁移到 asyncData 中，asyncData 返回的数据会在组件实例化前完成挂载，head 执行时可以直接读取到完整值。
3. 如果你使用 Nuxt 2 的 fetch 方法，可以通过 $fetchState 等待加载完成后再返回 meta 配置：

export default () => {
  return {
    head () {
      // 数据还在加载中时返回空配置，加载完成后再读取 story
      if (this.$fetchState.pending) return {}
      return {
        title: this.story.content.title
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Markus G.