1

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

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

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');
  }
}

动作.js

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

1 回答 1

1

从 Vue 2.6 开始，有一个新的 SSR 功能可以完成您想要做的事情。ServerPrefetch 现在是一个钩子，它可以解析 Promise 以获取异步数据并可以与全局存储交互。

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

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

于 2019-04-11T01:31:29.730 回答