首页 文章

Vuejs:SSR无法正常工作

提问于
浏览
1

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

AsyncData

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

Action

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甚至没有被调用 .

1 回答

  • 0

    以下是nuxtjs.org的答案:

    由于组件没有asyncData方法,因此无法直接在组件中获取异步数据服务器端 . 为了解决这个限制,你有两个基本选项:在mount()钩子中进行API调用,并在加载时设置数据属性 . 缺点:不适用于服务器端渲染 . 在页面组件的asyncData()或fetch()方法中进行API调用,并将数据作为props传递给子组件 . 服务器渲染工作正常 . 缺点:页面的asyncData()或fetch()可能不太可读,因为它正在加载其他组件的数据

相关问题