使用 useState 管理響應式狀態

Amd794發表於2024-08-01

title: 使用 useState 管理響應式狀態
date: 2024/8/1
updated: 2024/8/1
author: cmdragon

excerpt:
摘要：本文詳細介紹了在Nuxt3框架中使用useState進行響應式狀態管理的方法，包括其基本概念、優勢、使用方法、共享狀態實現以及效能最佳化技巧。useState支援伺服器端渲染（SSR），可建立響應式狀態並在元件間共享，透過具體示例展示了其基本用法、如何在多個元件間共享狀態以及使用shallowRef提升效能。

categories:

  • 前端開發

tags:

  • Nuxt3
  • useState
  • SSR
  • 狀態管理
  • 元件
  • 響應式
  • 共享狀態

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在 Nuxt3 框架中，useState
是一個功能強大的工具，用於建立響應式狀態並支援伺服器端渲染（SSR）。它允許您在元件中管理狀態，並在客戶端和伺服器端之間共享這些狀態。以下是詳細的教程，幫助小白使用者理解如何使用 useState。

什麼是 useState？

useState
是一個用於建立響應式狀態的組合函式。它可以在元件中使用，允許您在整個應用中共享狀態，並且支援伺服器端渲染。透過 useState
建立的狀態在元件的不同生命週期之間保持一致，並能夠自動響應狀態的變化。

為什麼使用 useState？

1. 響應式狀態管理

useState 建立的狀態是響應式的，這意味著當狀態發生變化時，相關的元件會自動重新渲染。這樣，您可以輕鬆管理和更新元件的狀態，而不需要手動處理
DOM 更新。

2. 伺服器端渲染支援

useState 支援伺服器端渲染（SSR），這意味著您可以在伺服器端預先生成狀態，然後將其傳遞給客戶端。這樣可以提高頁面載入效能，並確保客戶端和伺服器端的狀態一致。

3. 共享狀態

useState 允許您在多個元件之間共享狀態。透過將狀態定義為全域性狀態，您可以在應用的不同部分輕鬆訪問和更新相同的狀態。

如何使用 useState？

基本用法

useState 可以用來建立響應式狀態並設定預設值。以下是一個簡單的示例：


<template>
  <div>
    <p>計數器值：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup lang="ts">

  // 建立一個響應式狀態並設定預設值為 0
  const count = useState('counter', () => 0);

  // 增加計數器值的函式
  const increment = () => {
    count.value++;
  };
</script>

在這個示例中，我們使用 useState 建立了一個名為 count 的響應式狀態，並將其初始值設定為 0。當使用者點選按鈕時，increment
函式會增加 count 的值，元件會自動更新以顯示新的計數器值。

共享狀態

useState 允許您在不同元件之間共享狀態。以下是一個示例，展示瞭如何在多個元件中共享相同的狀態：

Counter.vue


<template>
  <div>
    <p>計數器值：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup lang="ts">

  // 使用相同的鍵來共享狀態
  const count = useState('sharedCounter', () => 0);

  const increment = () => {
    count.value++;
  };
</script>

Display.vue


<template>
  <div>
    <p>計數器值顯示：{{ count }}</p>
  </div>
</template>

<script setup lang="ts">

  // 使用相同的鍵來共享狀態
  const count = useState('sharedCounter');
</script>

在這個示例中，Counter.vue 和 Display.vue 都使用了相同的狀態鍵 'sharedCounter'。這樣，當 Counter.vue
中的計數器值發生變化時，Display.vue 元件也會自動更新以顯示最新的計數器值。

使用 shallowRef 提高效能

當狀態包含大型物件或陣列時，您可能希望使用 shallowRef 來提高效能。shallowRef 允許您建立淺層響應式狀態，從而避免深層次的響應式更新。

示例：使用 shallowRef


<template>
  <div>
    <p>{{ state.deep }}</p>
    <button @click="updateDeep">更新</button>
  </div>
</template>

<script setup lang="ts">

  // 使用 shallowRef 建立淺層響應式狀態
  const state = useState('shallowState', () => shallowRef({deep: '未更新'}));

  const updateDeep = () => {
    state.value.deep = '已更新';
  };
</script>

在這個示例中，我們使用 shallowRef 建立了一個包含大型物件的狀態。shallowRef 僅對物件的引用進行響應式處理，而不對物件的內部屬性進行深層次的響應式處理。

引數說明

  • key: 狀態的唯一鍵。確保資料在請求中被正確地去重。如果不提供鍵，將為 useState 例項生成一個唯一的鍵。
  • init: 當狀態未初始化時，提供狀態初始值的函式。這個函式也可以返回一個 Ref。
  • T: 狀態的型別（僅 TypeScript）。

總結

useState 是一個強大的工具，用於在 Nuxt3 中建立響應式狀態並支援伺服器端渲染。透過使用 useState
，您可以在元件之間共享狀態，提高應用效能，並簡化狀態管理。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 useState 管理響應式狀態 | cmdragon's Blog

往期文章歸檔：

  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog
  • 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog

相關文章