vue.js - 我收到错误 'Cannot read property $apollodata of undefined' 但我的页面上没有 Apollo 的属性

Question

我有一个(奇怪的)问题我想不通。

我创建了一个主页，其中包含一些来自 Apollo 模块调用的数据。一切正常，但是当我尝试导航到下一页时，出现错误“无法读取未定义的属性‘$apolloData’”。问题是在我导航到的第二页上没有调用 Apollo。它只是一个静态页面。

即使您不在调用查询的页面上，Apollo 是否会继续重新获取数据？ 在进入下一页之前我应该​​做些什么吗？

我不知道问题出在哪里，所以非常感谢您的帮助!

被称为主页的查询:

apollo: {
    query1: {
      query: query1,
      prefetch: true,
    },
    query2: {
      query: query2,
      prefetch: true,
      variables () {
        return { id: this.query2variable }
      }
    },
    query3: {
      query: query3,
      variables () {
        return { id: this.query3variable }
      },
      // Disable the query
      skip () {
        return this.skipQuery
      },
    }
  },

导航到第二页:

<div
      class="text-titleColor font-bold w-full block flex-grow lg:flex lg:items-center lg:w-auto"
      :class="open ? 'block' : 'hidden'"
    >
      <div class="text-sm lg:flex-grow text-right">
        <router-link
          to="/"
          class="block mt-4 mr-4 p-1 lg:inline-block lg:mt-0 border-b-2 border-solid border-transparent hover:border-titleColor"
        >Search </router-link>
        <router-link
          to="aboutus"
          class="block mt-4 mr-4 p-1 lg:inline-block lg:mt-0 border-b-2 border-solid border-transparent hover:border-titleColor"
        >About us</router-link>
        <router-link
          to="/"
          class="block mt-4 mr-4 p-1 lg:inline-block lg:mt-0 border-b-2 border-solid border-transparent hover:border-titleColor"
        >Login </router-link>
        <router-link
          to="/"
          class="inline-block text-sm px-4 py-2 text-hover bg-titleColor  leading-none rounded border-transparent mt-4 lg:mt-0"
        >Account aanmaken</router-link>
      </div>
    </div>

当我从第二页回到主页时，它又在主页上工作了。

Answer 1

确保您在出现错误的页面上返回 data() 上的对象。

data(){
  return{
    // your data
  }
}

我遇到了同样的错误，花了我一些时间才意识到我缺少包装数据的 return {}。它是如此明显和基本，以至于我没有看那里。