如何在 nuxt.js ssr 中从 node.js 向 vue 传递数据？答案

【问题标题】：How to pass the data to vue from node.js, in nuxt.js ssr?如何在 nuxt.js ssr 中从 node.js 向 vue 传递数据？
【发布时间】：2019-06-27 12:26:18
【问题描述】：

我想将 Firestore 数据从 Node.js (Express) 传递给 vue 文件。因为我必须使用firestore 的getCollections() 方法。它不能在客户端运行。

我构建了 nuxt-ssr 来部署 google-cloud-functions 和云托管。一世参考这篇文章。(https://itnext.io/how-to-create-a-ssr-serverless-app-with-firebase-nuxt-js-in-an-hour-6e6e03d0b3b8) 该目录结构如下所示。

我想我的目的可以通过函数目录中的 index.js 来实现。它看起来像下面。

const functions = require('firebase-functions')
const express = require('express')
const { Nuxt } = require('nuxt')

const app = express()

const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/'
  }
}
const nuxt = new Nuxt(config)

function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  nuxt.renderRoute('/').then(result => {
    res.send(result.html)
  }).catch(e => {
    res.send(e)
  })
}

app.get('*', handleRequest)
exports.nuxtApp = functions.https.onRequest(app)

我应该如何更改此代码？请给我你的智慧。

【问题讨论】：

标签： javascript node.js firebase google-cloud-functions nuxt.js

【解决方案1】：

我有答案。

nuxt.renderRoute()可以将参数中的数据作为可选参数传递。 (https://nuxtjs.org/api/nuxt-render-route)

所以在函数目录中，我应该像下面这样更改代码。

  :
function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  **req.data = "some data from firestore"**
  nuxt.renderRoute('/', **{ req }** ).then(result => {
    res.send(result.html)
  }).catch(e => {
    res.send(e)
  })
}
  :

在 src 目录中，vue.js 文件如下所示。

<template>
    <p>{{ apiResult }}</p>
</template>

<script>
export default {
  asyncData(context) {
    return { apiResult: context.req.data };
  }
}
</script>

<template>
</template>

它将像some data from firestore一样查看req.data。
我可以达到我的目的。谢谢各位！

【讨论】：