了解 Svelte 應用程序中的狀態管理

Maya Patel included in Programming Javascript Web Development Coding Tips

2023-08-23 384 words 2 minutes

Contents

狀態管理是每個現代 Web 應用程序的重要組成部分。每個主要的 Web 開發框架（例如 React 和 Vue）都有不同的處理狀態的方式。

Svelte 並沒有逃避管理狀態的挑戰，該庫提出了多種策略來解決這個問題。

什麼是狀態管理以及為什麼它很重要?

在網絡開發領域，術語“狀態”涉及表示特定網頁或其組成元素的當前狀態的信息。為了說明這一概念，請考慮創建一個在線市場，用戶可以在其中瀏覽商品、將選定的商品添加到虛擬購物車中，並通過處理付款來完成交易。

為了始終顯示購物車圖標內的準確商品數量，無論當前查看的網頁如何，人們可能會發現狀態管理是必不可少的工具。這種方法可確保當用戶添加或刪除商品時，購物車實時動態調整其內容，無論其在網站上的位置如何。

有效的狀態管理在維護應用程序各個組件內數據的組織和一致性方面發揮著至關重要的作用。這最終有助於簡化和無縫的用戶體驗，最大限度地減少混亂和煩惱。

Svelte 中的狀態管理

本質上，我們可以利用 Svelte 中的等號（‘=’）來描述和修改狀態變量。作為說明，假設希望 h1 元素的內容反映特定的狀態變量；可以按如下方式實現這一點:

 <script>
let count = 0;
</script>

<h1>
{count}
</h1>

<button on:click={()=>count=count \+ 1}> Increase Count </button>

提供的代碼片段聲明一個命名屬性“count”，並將其值初始化為零。此外，它還附加了一條語句，將“count”的當前值分配給 HTML 元素的“# ”標記。最後，事件偵聽器附加到按鈕，這使用戶能夠在單擊該按鈕時增強“ count ”的狀態。

來自GIPHY

在 Svelte 中更新數組狀態變量

事實上，讓我們詳細檢查接下來的代碼片段:

 <script>
  let todoList = [
    "Read my books",
    "Eat some foods",
    "Bath the dogs",
    "Take out the garbage",
  ];

  function removeLastItem() {
    todoList.pop();
  }
</script>

<ul>
  {#each todoList as item}
    <li>{item}</li>
  {/each}
</ul>

<button on:click={() => removeLastItem()}> Remove last item</button>

所提供的代碼片段建立了狀態變量“todoList”和數組數據結構之間的對應關係。單擊“刪除最後一項”按鈕後，系統會執行“removeLastItem()”函數，該函數會刪除“todoList”變量中的最新元素。

事實上，如果在網絡瀏覽器中執行此代碼並通過單擊旨在刪除最終項目的元素與其進行交互，則顯示的列表中不會反映任何更改。

通過GIPHY

為了避免在 Svelte 應用程序上下文中結合使用“=”運算符和數組操作方法（例如“.pop()”）可能出現的潛在性能問題，可以採用一種解決策略，即遞歸渲染通過稱為“重新分配”的過程來構建整個列表結構。這涉及更新原始數據對象的引用以指向其自身，從而促使框架根據關聯變量的修改狀態重新評估和更新其表示。

 function removeLastItem() {
  todoList.pop();
  // Assign the updated array to itself
  todoList = todoList;
 }

在 Web 瀏覽器中執行代碼時，預計狀態數組將在單擊指定按鈕時按預期更新。

通過 GIPHY

使用 Svelte Store 管理狀態

在 Svelte 中，存儲用於通過反應式系統促進未連接組件之間的狀態共享。本質上，存儲是一個可以使用 subscribe 方法訂閱的對象，允許組件監視對其數據的更新。為了創建一個簡單的讀寫存儲，必須從 svelte/store JavaScript 模塊導入 writable 函數，如下所示:

 import { writeable } from "svelte/store"

當然，想像一下，有一個“store.js”腳本，其中包含以下內容:

 import { writable } from "svelte/store";

export const todoList = writable([
    "Read my books",
    "Eat some foods",
    "Bath the dogs",
    "Take out the garbage",
    "Water the flowers"
]);

提供的代碼創建一個名為“todoList”的命名常量，並提供一個數組作為可讀對象的輸入。因此，現在可以在任何需要其實用性的組件中引入存儲域:

 <script>
import { todoList } from "./store";
</script>

為了訪問 Python 類中對象的特定實例，可以使用 __getitem__ 或 subscription 方法。這允許直接檢索和操作所需的數據，而無需瀏覽類層次結構中的各個嵌套級別。

 let list;

todoList.subscribe((items)=>{
    list = items;
})

與 subscribe 方法關聯的回調函數接受當前存儲值作為輸入參數並將其分配給 items 局部變量。因此，可以使用提供的語法顯示“list”數組中的每一項。

 <ul>
  {#each list as item}
    <li>{item}</li>
  {/each}
</ul>

為了修改存儲的值，您可以使用 update() 方法。此方法具有一個回調函數，該函數接受當前存儲值作為輸入並返回應替換它的更新元素。

 todoList.update((items) => {
  items.pop();
  return items;
});

在 Svelte 中創建只讀存儲

在某些情況下，可能需要通過將其連接轉換為只讀模式來限制組件修改特定存儲中的數據的能力。這可以使用“ read ”函數來實現，該函數充當組件與存儲交互的訪問修飾符。

 import { readable } from 'svelte/store';

export const todoList = readable([
    "Read my books",
    "Eat some foods",
    "Bath the dogs",
    "Take out the garbage",
    "Water the flowers"
]);

只讀存儲值上的 update() 方法不可用，因此必須避免某些操作，例如嘗試通過所述方法修改其內容，這將導致拋出運行時錯誤。

 function removeLastItem() {
  todoList.update((items) => {
    items.pop();
    return items;
  });
}

通過 Context API 使用 Stores

Svelte 提供了一個 Context API，可以通過從“svelte”模塊導入“setContext”函數來使用它。這使得開發人員能夠更有效地在其應用程序中創建和管理上下文值。

 import {setContext} from "svelte"

要將信息從較高級別的組件傳輸到較低級別的組件，一種常見的方法是利用子組件的 HTML 標記中的 props 或屬性。這允許父組件向子組件提供必要的詳細信息和指令，以使其有效運行。

 // Parent Component
<script>
let age = 42;
</script>

<ChildComponent age={age} />

使用 Context API 可以在應用程序內的各個組件之間進行有效通信，從而繞過通過中間變量傳輸數據的要求。 React 使用 useContext 鉤子提供了類似的機制。為了在 Svelte 中渲染上下文值，有必要將相應的存儲值傳遞給上下文。

在父組件中，可能會遇到如下的結構表示:

 <script>
  import { writable } from "svelte/store";
  import Component2 from "./Component2.svelte";
  import { setContext } from "svelte";

  let numberInStore = writable(42);
  setContext("age", numberInStore);
</script>

<ChildComponent />
<button on:click={() => $numberInStore\+\+}>Increment Number</button>

提供的代碼片段展示了一個商店實例，該實例與特定的鍵“age”一起作為參數傳遞給“setContext”函數。在 Svelte 開發領域內，允許通過在商店名稱前附加美元符號（“$”）來訪問特定商店變量的值。

子組件能夠通過使用 getContext 函數來訪問其父組件提供的上下文值，這需要指定適當的鍵才能成功檢索。

 <script>
  import { getContext } from "svelte";
  let userAge = getContext("age");
</script>

<h1>
    {$userAge}
</h1>

Svelte 與 React 中的狀態管理

與 React 中的狀態管理過程相比，Svelte 中的狀態管理過程更加簡化，只需要使用等號 (=) 來定義和更新狀態即可。這與 React 等 Web 開發框架形成鮮明對比，後者需要實現“useState”和“useReducer”等功能來解決基本的狀態管理挑戰。

先進狀態管理技術的利用是軟件開發的一個基本方面，特別是在 Web 應用程序領域。有幾種方法可以促進這一努力，例如 React Context API 的實現或 Redux 和 Zustand 等外部工具。然而，對於 Svelte 框架，它提供了自己的內部機制，可以有效地消除通過第三方庫提供額外支持的需求。這是通過利用 Svelte Stores 的強大功能並結合 Svelte Context API 來實現的。