usePreviewMode

预览模式允许你在不向用户公开的情况下查看更改在线上站点中的显示效果。

你可以使用内置的 usePreviewMode 组合式函数访问并控制 Nuxt 中的预览状态。如果该组合式函数检测到当前为预览模式，它将自动强制 useAsyncData 和 useFetch 的相关内容重新渲染，以展示预览数据。

const { enabled, state } = usePreviewMode()

选项

自定义 enable 检查方式

你可以指定自定义方式来启用预览模式。默认情况下，usePreviewMode 会在 URL 参数中检测到 preview=true（例如：http://localhost:3000?preview=true）时启用预览模式。
你可以将 usePreviewMode 封装到自定义组合式函数中，以便在多处使用时保持一致，并避免出错。

export function useMyPreviewMode () {
  return usePreviewMode({
    shouldEnable: () => {
      return !!route.query.customPreview
    }
  });
}

修改默认状态

usePreviewMode 会尝试从 URL 中读取 token 参数并将其存入 state 中。你可以修改这个 state，修改后的内容将在所有 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('预览模式已启用')
  },
  onDisable: () => {
    console.log('预览模式已禁用')
  }
})

示例

以下示例创建了一个页面，其中一部分内容仅在预览模式下渲染：

<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">
      仅预览内容：{{ state.token }}
      <br>
      <button @click="enabled = false">
        禁用预览模式
      </button>
    </p>
  </div>
</template>

现在你可以生成并预览你的网站：

npx nuxi generate
npx nuxi preview

然后你可以在页面地址后添加 preview 查询参数以访问预览内容：

?preview=true