Как получить данные в моем приложении Nuxt для всех страниц / компонентов

Question

У меня в каталоге плагинов есть файл с именем config-ingest.js, который содержит следующее:

import gql from 'graphql-tag'

export default ({ app }, inject) => {

  const client = app.apolloProvider.defaultClient;

  const apps = gql`
    query {
      apps: allApps {
        key
        tree
      }
    }
  `;

  client.query({ query: apps }).then(response => {
    inject('configStructure', response.data.apps);
  });

}

Несмотря на то, что данные успешно получены, они, похоже, доступны не на всех моих страницах и компонентах.

Если я хочу получить данные с другого сервера, которые должны быть доступны для всех моих страниц, как бы я это сделал?Я хочу поместить эти данные в отдельный файл, чтобы в любой момент получить данные из любого компонента или страницы.

Answer 1

Мне удалось сделать следующее в store/index.js:

import gql from 'graphql-tag'

export const state = () => ({
  apps: []
})

export const mutations = {
  SET_APPS (state, apps) {
    state.apps = apps
  },
}

export const getters = {
  getApps (state) {
    return state.apps;
  },
  }
}

export const actions = {
  async nuxtServerInit ({ commit }, { app }) {

    const client = app.apolloProvider.defaultClient;

    const apps = gql`
        query {
          apps: allApps {
            key
            label
            tree
          }
        }
      `;

    await client.query({ query: apps }).then(response => {
      commit('SET_APPS', response.data.apps)
    });
  }
}

Answer 2

Вы должны использовать Vuex Store для этого.https://nuxtjs.org/guide/vuex-store/