Vue.js 如何使组件获得异步数据并呈现服务器端？

我们知道，在ssr环境中，只有路由器组件可以请求

asyncData

。我有一个主要组件（不是路由器组件），我需要一些异步数据来呈现服务器端。因为它不是路由器组件，所以我不能使用

asyncData

进行服务器端渲染

所以我使用

创建了
钩子来调用异步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');
  }
}

Action.js

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

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

在他们的文档中查看更多信息

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