Как передать данные vue из node.js, в nuxt.js ssr? - PullRequest
Новая
       9

Как передать данные vue из node.js, в nuxt.js ssr?

0 голосов
/ 03 февраля 2019

Я хочу передать данные пожарного магазина в файлы vue из Node.js (Express).Потому что я должен использовать метод getCollections() в Firestore.Он не может работать на стороне клиента.

Я создаю nuxt-ssr для развертывания функций google-cloud и cloud-hosting.Я ссылаюсь на эту статью. (https://itnext.io/how-to-create-a-ssr-serverless-app-with-firebase-nuxt-js-in-an-hour-6e6e03d0b3b8) Эта структура каталогов похожа на приведенную ниже.

--- public (развернуть на облачный хостинг)
|
| -src (nuxt build в каталог функций)
|
| -функции (иметь Node.js и развернуть в облачные функции)
|
| -firebase.json
:

Iугадайте, что моя цель может быть достигнута index.js в функциях dir. Она выглядит следующим образом. 

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)

Как мне изменить этот код? Пожалуйста, дайте мне вашу мудрость.

1 Ответ

0 голосов
/ 04 февраля 2019

У меня был ответ.

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 dir файл 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.
Я мог бы достичь своей цели. Спасибо, ребята!

...