usePreviewMode

预览模式允许您查看更改如何在实时网站上显示，而不会将其公开给用户。

您可以使用内置的 usePreviewMode 可组合函数来访问和控制 Nuxt 中的预览状态。如果可组合函数检测到预览模式，它将自动强制执行 useAsyncData 和 useFetch 为重新渲染预览内容所需的任何更新。

const { enabled, state } = usePreviewMode()

选项

自定义 enable 检查

您可以指定一种自定义方式来启用预览模式。默认情况下，usePreviewMode 可组合函数将在 url 中存在一个等于 true 的 preview 参数时启用预览模式（例如，https://127.0.0.1:3000?preview=true）。您可以将 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' }
  }
})

自定义 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')
  }
})

示例

以下示例创建一个页面，其中一部分内容仅在预览模式下呈现。

<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