如何在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一樣。
我可以實現我的目標。 感謝大伙們！