随处访问 pageContext

默认情况下，pageContext 可用于：

  • 仅在服务端
  • 仅在根组件 Page （Vue/React/...）

但是我们可以让 pageContext 在任何地方都可使用

Browser-side

为了使 pageContext 在浏览器环境中可用，我们可以使用 passToClient

React

通过 React Context 让所有React组件都可使用 pageContext

例子：

Vue 3 - Composition API

通过 app.provide() 和 inject() 让所有Vue组件都可使用 pageContext

// app.js

const app = createSSRApp(/*...*/)
app.provide('pageContext', pageContext)
<!-- someComponent.vue -->

<template>
  <!-- We can access `pageContext` here -->
  {{ pageContext.someProp }}
</template>

<script setup>
import { inject } from 'vue'
const pageContext = inject('pageContext')
</script>

我们也可以实现 usePageContext hook：

// usePageContext.js

import { inject } from 'vue'

export { usePageContext }
export { setPageContext }

const key = Symbol()

function usePageContext() {
  const pageContext = inject(key)
  return pageContext
}
function setPageContext(app, pageContext) {
  app.provide(key, pageContext)
}
const app = createSSRApp(/*...*/)
setPageContext(app, pageContext)
<script setup>
import { usePageContext } from './path/to/usePageContext'
const pageContext = usePageContext()
</script>

例子：

如果使用 Client Routing，我们需要使 pageContext 响应式：

Vue 3 - globalProperties

或者，我们可以使用 app.config.globalProperties 使所有 Vue 组件都可访问 pageContext

// app.js

const app = createSSRApp(/*...*/)
app.config.globalProperties.$pageContext = pageContext
<!-- someComponent.vue -->

<template>
  <!-- We can access `pageContext` here -->
  {{ $pageContext.someProp }}
</template>

<script setup>
import { getCurrentInstance } from 'vue'
// We can access `pageContext` here
const pageContext = getCurrentInstance().appContext.config.globalProperties.$pageContext
</script>

例子：

如果使用 Client Routing，我们需要使 $pageContext 响应式：

Vue 2

Vue2 我们可以使用 Vue.prototype