usePreviewMode

预览模式允许你查看更改在实际网站上的显示效果，而不会向用户显示更改。

¥Preview mode allows you to see how your changes would be displayed on a live site without revealing them to users.

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

¥You can use the built-in usePreviewMode composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for useAsyncData and useFetch to rerender preview content.

const { enabled, state } = usePreviewMode()

选项

¥Options

自定义 enable 检查

¥Custom enable check

你可以指定自定义方式来启用预览模式。默认情况下，如果 url 中的 preview 参数等于 true（例如 http://localhost:3000?preview=true），则 usePreviewMode 可组合项将默认启用预览模式。你可以将 usePreviewMode 封装到自定义可组合项中，以保持选项在使用过程中的一致性并防止出现任何错误。

¥You can specify a custom way to enable preview mode. By default the usePreviewMode composable will enable preview mode if there is a preview param in url that is equal to true (for example, http://localhost:3000?preview=true). You can wrap the usePreviewMode into custom composable, to keep options consistent across usages and prevent any errors.

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

修改默认状态

¥Modify default state

usePreviewMode 会尝试将来自 URL 的 token 参数的值存储在 state 中。你可以修改此状态，它将适用于所有 usePreviewMode 调用。

¥usePreviewMode will try to store the value of a token param from url in state. You can modify this state and it will be available for all usePreviewMode calls.

const data1 = ref('data1')

const { enabled, state } = usePreviewMode({
  getState: (currentState) => {
    return { data1, data2: 'data2' }
  }
})

自定义 onEnable 和 onDisable 回调

¥Customize the onEnable and onDisable callbacks

默认情况下，启用 usePreviewMode 后，它将调用 refreshNuxtData() 从服务器重新获取所有数据。

¥By default, when usePreviewMode is enabled, it will call refreshNuxtData() to re-fetch all data from the server.

禁用预览模式后，可组合项将附加一个回调函数，用于在后续路由导航后调用 refreshNuxtData() 运行。

¥When preview mode is disabled, the composable will attach a callback to call refreshNuxtData() to run after a subsequent router navigation.

你可以通过为 onEnable 和 onDisable 选项提供自定义函数来触发自定义回调。

¥You can specify custom callbacks to be triggered by providing your own functions for the onEnable and onDisable options.

const { enabled, state } = usePreviewMode({
  onEnable: () => {
    console.log('preview mode has been enabled')
  },
  onDisable: () => {
    console.log('preview mode has been disabled')
  }
})

示例

¥Example

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

¥The example below creates a page where part of a content is rendered only in preview mode.

<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>

现在你可以生成你的网站并提供服务：

¥Now you can generate your site and serve it:

npx nuxi generate
npx nuxi preview

然后，你可以通过在要查看的页面末尾添加查询参数 preview 来查看预览页面：

¥Then you can see your preview page by adding the query param preview to the end of the page you want to see once:

?preview=true