Question

我们知道只有路由器组件可以在ssr环境中请求asyncData。我有一个主要组件（不是路由器组件），我需要一些异步数据来呈现服务器端。因为它不是路由器组件，所以我不能使用asyncData进行服务器端渲染。

所以我使用created钩子来调用异步api，但是组件钩子是同步的，不等待promise。如何在服务器端获取异步数据？

App.vue - 主要组件

export default {
  components: {
    footer: Footer,
    header: Header,
    selector: selector
  },
  beforeMount() {
    // need preload metadata here
  },
  created () {
    // it return preload metadata as response.
    return this.$store.dispatch('GET_PRELOAD_META_DATA');
  }
}

Action.js

GET_PRELOAD_META_DATA: ({ commit }) => {
    return axios.get("api/preload").then(({ data }) => {
      commit('SET_PRELOAD_DATA', data);
    });
},

Answer 1

从Vue 2.6开始，有一个新的SSR功能可以完成您尝试做的事情。 ServerPrefetch现在是一个钩子，可以解决对获取异步数据的承诺并可以与全局存储进行交互的问题。

在他们的文档中查看更多信息。 https://ssr.vuejs.org/api/#serverprefetch

（我知道这是一篇旧文章，但是在谷歌搜索时偶然发现了它，并认为我也可以帮助其他人使用谷歌搜索）

如何使组件获取异步数据并呈现服务器端？

1 个答案: