usePreviewMode

預覽模式允許您檢視更改在即時站點上的顯示方式，而無需向用戶顯示。

您可以使用內建的 usePreviewMode 可組合函式來訪問和控制 Nuxt 中的預覽狀態。如果可組合函式檢測到預覽模式，它將自動強制任何必要的更新，以便 useAsyncData 和 useFetch 重新渲染預覽內容。

const { enabled, state } = usePreviewMode()

選項

自定義 enable 檢查

您可以指定啟用預覽模式的自定義方式。預設情況下，如果 URL 中有一個等於 true 的 preview 引數（例如，https://:3000?preview=true），usePreviewMode 可組合函式將啟用預覽模式。您可以將 usePreviewMode 包裝到自定義可組合函式中，以保持跨用途選項的一致性並防止任何錯誤。

export function useMyPreviewMode () {
  const route = useRoute()
  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 nuxt generate
npx nuxt preview

然後，您可以透過在要檢視的頁面末尾新增查詢引數 preview 來檢視您的預覽頁面，例如 https://:3000/?preview=true。