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）此目录结构如下所示。

我想我的目的可以通过函数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。
我可以实现我的目标。谢谢你们！

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

1 个答案: