Quasar CLI with Vite - @quasar/app-vite
ssrContext对象

ssrContext对象是SSR的上下文,所有应用程序的Vue组件都是用它来渲染的。

用法

WARNING

ssrContext对象仅在SSR构建中,在服务器端编译时可用(当true == true)。

在其他地方,它作为参数提供给启动文件Vuex存储Vue路由器初始化函数,以及预取 方法:

// 一个启动文件
export default ({ ..., ssrContext }) => { /* ... */ }

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

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

// 使用预取:
preFetch ({ ..., ssrContext }) { /* ... */ }

你也可以在你的Vue组件中访问ssrContext。下面是两个例子,一个用Composition API,一个用Options API:

// Composition API
import { useSSRContext } from 'vue'

export default {
  // ...
  setup () {
    //  我们需要保护它,只在SSR服务器端调用它:
    const ssrContext = process.env.SERVER ? useSSRContext() : null
    // ...对它做一些事情
  }
}
// Options API
export default {
  // ...
  created () { //  可以是任何其他Vue组件的生命周期钩子
    this.ssrContext
  }
}

Anatomy of ssrContext

ssrContext: {
  req, // Express.js对象
  res, // Express.js对象
  $q, // Quasar的$q对象
  state, // Vuex的状态(只有在使用Vuex存储的情况下)。

  nonce, // (可选择自己设置)
              // 使用的全局 "nonce "属性。

  onRendered, // 注册一个函数,在应用被Vue渲染后在服务器端执行。
              // 在完全处理ssrContext之后,
              // 你可能需要这个函数来再次访问ssrContext。
              // 例子: ssrContext.onRendered(() => { /* ... */ })

  rendered // (可选,自己设置)
              // 将此设置为一个函数,
              // 该函数将在应用被Vue渲染后在服务器端执行 
              // 我们建议使用 "onRendered "来代替。
              //
              // 目的:向后兼容Vue生态系统包
              // (比如@vue/apollo-ssr)
              // 例子: ssrContext.rendered = () => { /* ... */ }
}

关于“nonce”属性的目的的更多信息可以在MDN上找到。

reqres是Express.js对当前服务器客户端的对象。req的一个用例是访问req.url以获得客户端正在请求的URL。

TIP

请随意将你自己的东西注入ssrContext,但不要篡改任何私有属性(以下划线开头的属性,例如:_someProp)。