Question

我使用hackernews Vuejs作为模板。当我在组件中使用AsyncData时，它无法正常工作

AsyncData

asyncData({ store }) {
    return store.dispatch('LOCATIONS');
},

动作

LOCATIONS: ({ commit, state }) => {
    return state.locationList.length ? Promise.resolve(state.locationList) : axios.get('http://localhost:3000/api/Locations').then(({ data }) => commit('SET_LOCATIONS', data))
}

当我从created（）或beforeMounted（）等调用相同的操作时它正在运行并且状态正在更新但是当使用asyncData时，API甚至没有被调用。

Answer 1

以下是nuxtjs.org的回答：

因为组件没有asyncData方法，所以不能   直接在组件中获取异步数据服务器端。为了   绕过那里限制你有两个基本选择：

在mounted（）钩子中进行API调用，并在何时设置数据属性   加载。缺点：赢得了服务器端渲染的工作。制作API   调用页面组件的asyncData（）或fetch（）方法   将数据作为道具传递给子组件。服务器渲染会   工作得很好。缺点：页面的asyncData（）或fetch（）可能是   可读性较差，因为它为其他组件加载数据

Vuejs：SSR无法正常工作

1 个答案: