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

标签 vuejs2 vuex nuxt.js prefetch

我正在尝试在客户端启动之前预取一些数据并更新 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 触发的,并且我在页面加载时获取了在终端中记录的第一个元素。然而,我在客户端的商店是空的。

我错过了什么?

最佳答案

在 friend 的帮助下,我们通过删除 node-fetch 并向 Vuex 添加 axios 来解决这个问题。

唯一的更改是在 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));
  } 
}

关于vuejs2 - 使用 Nuxt.js 在 Vuex 中预取 api 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53672198/

相关文章:

javascript - 基于具有唯一值的数组创建多个动态选择过滤器,以过滤 Vue.js 中的另一个数组

javascript - 获取对象或数组的深度

javascript - 无法加载 "props"数据

less - 如何在 Nuxt.js 中为 LESS 启用内联 JavaScript?

http - 执行多个请求 Axios (Vue.js)

javascript - Vue.js中后端API数据值变化如何自动更新前端?

vue.js - 带有 setter 的 mapState

vue.js - ...Vue.js 中的 mapState SyntaxError,使用 vuex

javascript - 如何使用 Vuetify 网格在 v-for 循环中显示商店项目?

nuxt.js - 将 Swiper js 与 Nuxt 一起使用会引发依赖项未找到错误