我正在尝试在客户端启动之前预取一些数据并更新 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/