简体   繁体   English

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

[英]How to pass the data to vue from node.js, in nuxt.js ssr?

I want to pass the firestore data to vue files from Node.js (Express). 我想将Firestore数据从Node.js(Express)传递到vue文件。 Because I must use firestore's getCollections() method. 因为我必须使用firestore的getCollections()方法。 It cannot run in client side. 它不能在客户端运行。

I build nuxt-ssr to deploy google-cloud-functions and cloud-hosting. 我构建nuxt-ssr来部署google-cloud-functions和cloud-hosting。 I refer to this article.( https://itnext.io/how-to-create-a-ssr-serverless-app-with-firebase-nuxt-js-in-an-hour-6e6e03d0b3b8 ) This directory structure is like below. 我指的是这篇文章。( https://itnext.io/how-to-create-a-ssr-serverless-app-with-firebase-nuxt-js-in-an-hour-6e6e03d0b3b8 )此目录结构类似于下面。

---public (deploy to cloud-hosting) --- public(部署到云托管)
| |
|-src ( nuxt build to functions directory) | -src(将nuxt build到functions目录)
| |
|-functions (have Node.js and deploy to cloud-functions) |-功能(具有Node.js并部署到云功能)
| |
|-firebase.json | -firebase.json
:

I guess my purpose can achieved by index.js in functions dir. 我想我的目的可以通过函数dir中的index.js来实现。 It looks like below. 如下图所示。

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)

How I should change this code? 我应该如何更改此代码? Please give me your wisdom. 请给我你的智慧。

I had answer. 我有答案。

nuxt.renderRoute() can pass the data in argument as optional. nuxt.renderRoute()可以将参数中的数据作为可选参数传递。 ( https://nuxtjs.org/api/nuxt-render-route ) https://nuxtjs.org/api/nuxt-render-route

So in functions dir, I should change the code like below. 因此,在函数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)
  })
}
  :

And in src dir, vue.js file looks like below. 在src目录中,vue.js文件如下所示。

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

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

<template>
</template>

It will view the req.data like some data from firestore . 它将查看req.data就像some data from firestore一样。
I could achieve my purpose. 我可以实现我的目标。 Thank you guys! 感谢大伙们!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM