Vuejs2 使用Nuxt.js在Vuex中预取api数据

我正在尝试在客户端启动之前预取一些数据并更新Vuex

store/index.js

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

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));
      });
    });
  }
}

store/moduleName.js

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

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));
      });
    });
  }
}

从“节点获取”导入获取；
导出常量状态=（）=>({
图片：[]
});
导出常量突变={
storeImages（状态、数据）{
state.images=[]；
state.images.push（…数据）；
console.log（state.images[0]）{
response.json（）.then（函数（数据）{
commit（'storeImages'，data.collection.items.slice（0,24））；
});
});
}
}

我的变异是由nuxtServerInit触发的，我将在页面加载时获取终端中记录的第一个元素。然而，我在客户端的存储是空的

---

我遗漏了什么？

在朋友的帮助下，我们成功地解决了这个问题，方法是删除节点获取，并将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));
  } 
}

---

我不确定我是否理解正确-你看到那一个了吗？：@Soleno很抱歉回复太晚；我以前确实看过，但是，那里的示例显示了如何通过从客户端而不是服务器端进行调度来触发存储中的操作（这正是我所追求的）