usePreviewMode
使用 usePreviewMode 检查和控制 Nuxt 中的预览模式
usePreviewMode
预览模式允许您查看更改在实际站点上的显示效果,而不会向用户公开。
您可以使用内置的 usePreviewMode
组合式函数来访问和控制 Nuxt 中的预览状态。如果组合式函数检测到预览模式,它将自动强制 useAsyncData
和 useFetch
进行任何必要的更新,以重新渲染预览内容。
const { enabled, state } = usePreviewMode()
选项
自定义 enable
检查
您可以指定自定义方式来启用预览模式。默认情况下,如果 url 中存在等于 true
的 preview
参数(例如,https://127.0.0.1:3000?preview=true
),则 usePreviewMode
组合式函数将启用预览模式。您可以将 usePreviewMode
包装到自定义组合式函数中,以保持跨用例的选项一致性并防止任何错误。
export function useMyPreviewMode () {
return usePreviewMode({
shouldEnable: () => {
return !!route.query.customPreview
}
});
}
修改默认状态
usePreviewMode
将尝试将 url 中 token
参数的值存储在状态中。您可以修改此状态,它将可用于所有 usePreviewMode
调用。
const data1 = ref('data1')
const { enabled, state } = usePreviewMode({
getState: (currentState) => {
return { data1, data2: 'data2' }
}
})
getState
函数会将返回的值附加到当前状态,因此请注意不要意外覆盖重要状态。自定义 onEnable
和 onDisable
回调
默认情况下,当启用 usePreviewMode
时,它将调用 refreshNuxtData()
以从服务器重新获取所有数据。
禁用预览模式后,组合式函数将附加一个回调,以在后续路由器导航后调用 refreshNuxtData()
运行。
您可以通过为 onEnable
和 onDisable
选项提供您自己的函数来指定要触发的自定义回调。
const { enabled, state } = usePreviewMode({
onEnable: () => {
console.log('preview mode has been enabled')
},
onDisable: () => {
console.log('preview mode has been disabled')
}
})
示例
以下示例创建一个页面,其中部分内容仅在预览模式下呈现。
pages/some-page.vue
<script setup>
const { enabled, state } = usePreviewMode()
const { data } = await useFetch('/api/preview', {
query: {
apiKey: state.token
}
})
</script>
<template>
<div>
Some base content
<p v-if="enabled">
Only preview content: {{ state.token }}
<br>
<button @click="enabled = false">
disable preview mode
</button>
</p>
</div>
</template>
现在您可以生成您的站点并提供服务
终端
npx nuxi generate
npx nuxi preview
然后,您可以通过将查询参数 preview
添加到您要查看的页面末尾来查看您的预览页面
?preview=true