Vue.js 服务端渲染中的组件答案

【问题标题】：Component in Vue.js server-side renderingVue.js 服务端渲染中的组件
【发布时间】：2017-04-02 02:29:36
【问题描述】：

我正在尝试让我的 Vue 应用程序具有服务器端渲染功能。我正在使用vue-server-renderer (https://www.npmjs.com/package/vue-server-renderer)。客户端渲染工作正常。

我的应用使用vue-router 和axios

这是我的server.js：

server.get('*', (request, response) => {
  bundleRenderer.renderToString({ url: request.url }, (error, htmlPromise) => {
    if (error) {
      // Log the error in the console
      console.error(error)
      // Tell the client something went wrong
      return response
        .status(500)
        .send(error)
    }
    response.send(layout.replace('<div id=app></div>', htmlPromise))
  })
})

getInfo()是获取服务器数据的方法。

这里是getInfo()：

export default {
  methods: {
    getInfo(api) {
        return axios
          .get(api || this.$route.params.path)
          .then((data) => {
            this.data = data
            this.$set(this, 'isLoading', false)
          })
    },
  },
}

我的服务器条目是：

import { app, router, store } from './index'

export default context => {

  let componentPromises = router.getMatchedComponents().filter((component) => {
    return component.methods && component.methods.getInfo
  }).map((component) => {
    return component.methods.getInfo()
  })

  return Promise.all(componentPromises).then(() => {
    return app
  })
}

但是，我很快意识到router.getMatchedComponents() 中的所有组件都没有$route 或$set。因此，方法getInfo() 停止工作。

来自https://router.vuejs.org/en/api/router-instance.html的文档很短，没有提供太多信息：

router.getMatchedComponents()

返回一个组件数组（定义/构造函数，而不是实例）与当前路由匹配。这主要用于服务器端渲染以执行数据预取。

我该如何解决这个问题？

【问题讨论】：

这正是存储概念的用武之地。Vuex 可以将从异步 api 获取的数据存储到所有组件共享的对象中。结帐github.com/vuejs/vue-hackernews-2.0

标签： javascript vue-router server-side-rendering vue.js

【解决方案1】：

我之前遇到过类似的问题，并通过执行以下操作成功预取数据：

app.$router.onReady(() => {
   const matchedComponents = app.$router.getMatchedComponents()

   if (!matchedComponents.length) { /* ... */}

   Promise.all(matchedComponents.map((Component: any) => {
     if (Component.options.methods.asyncData) {
       return Component.options.methods.asyncData({
         store: app.$store,
         route: app.$router.currentRoute
       });
     }
   })).then(() => { /* your callback here ... */ });
}

根据 vue ssr 文档 (https://ssr.vuejs.org/en/data.html)，建议的方法是在组件中使用自定义 asyncData 方法来执行数据获取，而不是直接调用组件方法：

export default {
   asyncData ({ store, route }) {
      // return the Promise from the action
      return store.dispatch('fetchItem', route.params.id)
   }
},

【讨论】：