Question

我是Gridsome和GraphQL的新手。但是，我没有为此项目使用GraphQL。我只有一个Gridsome项目设置和一些JSON数据，并且正在尝试全局定义它，以便可以从我的所有Vue页面和组件中访问它。（我知道它可以导入到组件中，但我正在寻找实现此目的的更多“网格方式”）。我已经完成以下步骤来实现此目的：

1）为Json文件创建了一个文件夹：data/myJson.json。 Json文件：

{
    "startPage": {
        "title": "Welcher Typ bist Du?",
        "subtitle": "Los geht's beim lustigen Datev-Quiz!",
        "startButton": "Quiz starten"
    }
}

2）我的gridsome.server.js看起来像这样：

var myJson = require('./data/questions.json');
module.exports = function (api) {
  api.loadSource(store => {
    const startPage = store.addContentType({
      typeName: 'StartPage'
    });

    startPage.addNode({
      title: 'StartPageInfo',
      fields: {
        title: myJson.startPage.title,
        subtitle: myJson.startPage.subtitle,
        startButton: myJson.startPage.startButton
      }
    })
  })
}

3）我正在index.vue页中查询此数据。

我可以在模板中访问此数据。所以，如果我做这样的事情

<h4 v-html="$page.allStartPage.edges[0].node.fields"></h4>

然后它可以很好地工作。

但是，我的问题是，我无法在Vue的data对象内或方法内访问此查询的数据。像这样：

data() {
  retrun {
    START_PAGE_END_POINT: this.$page.allStartPage.edges[0].node.fields
  }
}

给我一条错误消息，告诉我$page未定义。

有人介意我在做什么错吗？

Answer 1

所以我知道了。我可以在this.$page生命周期的Vue钩子中访问created()变量，而不能在data对象本身中访问。

代码看起来像这样。我首先在null对象中定义初始值为data的变量：

data() {
      return {
        START_PAGE_END_POINT: null,

        title: null,
        subtitle: null,
        startButton: null
      }
    }

然后在created()生命周期挂钩中，我为这些变量分配了正确的值：

created() {
      if (this.$page) {
        this.START_PAGE_END_POINT = this.$page.allStartPage.edges[0].node.fields;

        this.title = this.START_PAGE_END_POINT.title,
        this.subtitle = this.START_PAGE_END_POINT.subtitle,
        this.startButton = this.START_PAGE_END_POINT.startButton
      }
    }

我仍然很好奇为什么无法访问$page对象本身中的data变量。

使用Gridsome从Vue组件访问查询的数据

1 个答案: