Предварительно получить данные API в Vuex с Nuxt.js - PullRequest
Новая
       15

Предварительно получить данные API в Vuex с Nuxt.js

0 голосов
/ 07 декабря 2018

Я пытаюсь предварительно извлечь некоторые данные и обновить Vuex до того, как на нем появится клиентская сторона.

store/index.js

export const state = () => ({});
export const getters = {};
export const actions = {
  async nuxtServerInit ({ dispatch }) {
    await dispatch('nasa/getImages');
  }
};

store/moduleName.js

import fetch from 'node-fetch';

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

export const mutations = {
  storeImages(state, data) {
    state.images = [];
    state.images.push(...data);
    console.log(state.images[0]); <- this logs in the terminal
  }
}

export const actions = {
  getImages(store) {
    return fetch('api/url').then(response => {
      response.json().then(function(data) {
          store.commit('storeImages', data.collection.items.slice(0, 24));
      });
    });
  }
}

Моя мутация вызывается nuxtServerInit , и я получаю первый элемент, зарегистрированный в терминале при загрузке страницы.Однако мой магазин на стороне клиента пуст.

Что мне не хватает?

1 Ответ

0 голосов
/ 18 декабря 2018

С помощью друга нам удалось исправить эту проблему, удалив node-fetch и добавив axios вместо Vuex.

Единственное сделанное изменение былов store/moduleName.js, который теперь выглядит так: 

import Axios from 'axios'

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

export const mutations = {
  storeImages(state, data) {
    state.images.push(...data);
  }
}

export const actions = { 
  async getImages(store) {
    let res = await Axios.get('api/url');
    store.commit('storeImages', res.data.collection.items.slice(0, 24));
  } 
}
...