如何在Gridsome+VueJS+DatoCMS项目中访问GraphQL查询返回参数

问题原因 #

• _site[0]的写法错误：从你提供的GraphQL查询结构来看，DatoCms._site返回的是单个对象而非数组，不需要用[0]下标访问。
• metaInfo的定义方式错误：如果要在metaInfo中访问组件实例的this获取$page数据，必须将metaInfo定义为函数返回配置对象，直接定义为静态对象时组件实例还未初始化完成，无法正确访问this。

正确写法 #

export default {
  metaInfo() {
    return {
      title: this.$page.DatoCms._site.globalSeo.fallbackSeo.title,
      // 其余SEO字段都可以按照相同层级规则访问
    }
  }
}

如果需要校验返回的字段结构是否符合预期，可以在组件挂载钩子中打印数据排查：

export default {
  mounted() {
    console.log(this.$page.DatoCms._site)
  },
  metaInfo() {
    return {
      title: this.$page.DatoCms._site.globalSeo.fallbackSeo.title
    }
  }
}

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