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

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

0 голосов
/ 21 февраля 2019

Я новичок в 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>

, то все будет работать отлично.

Однако моя проблема в том, что я не могу получить доступ к этим запрашиваемым данным внутри объекта data Vue или внутриметоды и тд.Так что-то вроде этого: 

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

выдает мне сообщение об ошибке и говорит, что $page не определено.

Есть какие-нибудь мысли, что я делаю неправильно?

1 Ответ

0 голосов
/ 22 февраля 2019

Итак, я понял это.Мне удалось получить доступ к переменной 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.

...