Nuxt.js를 사용하여 Vuex에서 API 데이터 사전 가져오기

Nuxt.js를 사용하여 Vuex에서 API 데이터 사전 가져오기

클라이언트 측에서 시작하기 전에 몇 가지 데이터를 프리페치하여 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에 의해 트리거되며 페이지 로드 시 단말기에 첫 번째 요소가 로그인됩니다.하지만 클라이언트 측 매장은 비어 있습니다.

제가 무엇을 빠뜨리고 있나요?

친구의 도움을 받아 노드 페치를 삭제하고 대신 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));
  } 
}

언급URL : https://stackoverflow.com/questions/53672198/pre-fetch-api-data-in-vuex-with-nuxt-js