如何在nuxt.js ssr中将数据从node.js传递到vue？

Question

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

我构建nuxt-ssr来部署google-cloud-functions和cloud-hosting。 我指的是这篇文章。（ https://itnext.io/how-to-create-a-ssr-serverless-app-with-firebase-nuxt-js-in-an-hour-6e6e03d0b3b8 ）此目录结构类似于下面。

--- public（部署到云托管）
|
| -src（将nuxt build到functions目录）
|
|-功能（具有Node.js并部署到云功能）
|
| -firebase.json
：

我想我的目的可以通过函数dir中的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)

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

Answer 1

我有答案。

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

因此，在函数dir中，我应该更改如下代码。

  :
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>

它将查看req.data就像some data from firestore一样。
我可以实现我的目标。 感谢大伙们！