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/

相关文章:

vue.js - 如何禁用 vuex getter 缓存?

javascript - 当提交 promise 的 then() 时,Vuex3 突变不起作用

javascript - Vuex 竞争条件

vue.js - 视觉 : nuxt-i18n: Cannot translate the value of keypath

javascript - 将 csrf token 公开给位于不同域的客户端

javascript - Vue 和 Vue-tippy html 内容

javascript - v-bind如何绑定(bind):style work to modify width css property?

laravel - 在 vue.js laravel 中如果值为 null 则隐藏 div

javascript - Vue.js + Firebase - 如何显示深度嵌套的数据库

javascript - 添加另一个网站作为 serverMiddleware 的 Nuxt 模块