The ssrContext Object

ssrContext 是 SSR 的上下文对象，所有的 Vue 组件都使用它渲染。

用法

可以在以下几个地方访问到它：boot 文件的函数参数中，Vuex store和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 两个示例：

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

export default {
  // ...
  setup () {
    // 只能在 SSR 的服务端调用它
    const ssrContext = process.env.SERVER ? useSSRContext() : null
    // ...do something with it
  }
}

// Options API
export default {
  // ...
  created () { // 在其他的生命周期函数中也可以
    this.ssrContext
  }
}

ssrContext 解析

ssrContext: {
  req,        // Express.js 中的对象
  res,        // Express.js 中的对象
  $q,         // Quasar 的$q 对象
  state,      // Vuex 中的 state（只有当您使用了 Vuex store 时才有）

  nonce,      // 可选的 (optional to set it yourself)
              // 全局的 nonce"属性
              // The global "nonce" attribute to use

  onRendered, // 注册一个回调函数，将会在服务端渲染结束后调用
              //  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.url拿到当前客户端请求的 URL。