Доступ к запрашиваемым данным из компонента Vue с помощью Gridsome

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 переменная в created() Крюк жизненного цикла Vue, а не в 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 сам объект.