ssrContext 对象 | Quasar 框架

Quasar CLI 与 Webpack - @quasar/app-webpack

ssrContext 对象

该 ssrContext 对象是 SSR 上下文，所有应用程序的 Vue 组件都使用它进行渲染。

用法

警告

该 ssrContext 对象仅在 SSR 构建中可用，在服务器端编译时（当 process∙env∙SERVER === true）。

除其他位置外，它还作为参数提供给启动文件、Vuex 存储和 Vue Router 初始化函数以及 preFetch 方法

// a boot file
export default ({ ..., ssrContext }) => { /* ... */ }

// src/router/index.[js|ts]
export default ({ ..., ssrContext }) { /* ... */ }

// src/store/index.[js|ts]
export default ({ ..., ssrContext }) { /* ... */ }

// with preFetch:
preFetch ({ ..., ssrContext }) { /* ... */ }

您也可以在 Vue 组件中访问 ssrContext。下面是两个示例，一个使用组合式 API，另一个使用选项式 API

组合式 API

选项式 API

import { useSSRContext } from 'vue'

export default {
  // ...
  setup () {
    // we need to guard it and call it only on SSR server-side:
    const ssrContext = process.env.SERVER ? useSSRContext() : null
    // ...do something with it
  }
}

ssrContext 的结构

ssrContext: {
  req,        // Express.js object
  res,        // Express.js object
  $q,         // The Quasar's $q Object
  state,      // The Vuex state (ONLY if using the Vuex store)

  nonce,      // (optional to set it yourself)
              // The global "nonce" attribute to use

  onRendered, // Registers a function to be executed server-side after
              // app has been rendered with Vue. You might need this
              // to access ssrContext again after it has been fully processed.
              // Example: ssrContext.onRendered(() => { /* ... */ })

  rendered    // (optional to set it yourself)
              // Set this to a function which will be executed server-side
              // after the app has been rendered with Vue.
              // We recommend using the "onRendered" instead.
              //
              // Purpose: backward compatibility with Vue ecosystem packages
              // (like @vue/apollo-ssr)
              // Example: ssrContext.rendered = () => { /* ... */ }
}

有关“nonce”属性用途的更多信息，请访问 MDN。

该 req 和 res 是 Express.js 的当前服务器客户端对象。 req 的一个用例是访问 req.url 以获取客户端请求的 URL。

提示

随意将您自己的内容注入 ssrContext，但不要修改任何私有属性（以下划线开头的属性，例如 _someProp）。

发现错误？在浏览器中编辑此页面

1. 简介

2. 用法

3. ssrContext 的结构