如何在Svelte中實現狀態管理

在Svelte中實現狀態管理通常可以通過以下幾種方式：

1. 使用Svelte自帶的stores模塊：stores模塊提供了一種簡單的方式來管理全局狀態。您可以使用writable、readable、derived等函數創建可觀察的狀態，并在組件之間共享這些狀態。

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// Counter.svelte
<script>
  import { count } from './store.js';
</script>

<button on:click={() => count.update(n => n + 1)}>Increment</button>
<p>{$count}</p>

2. 使用Context API：Svelte也提供了Context API來在組件樹中傳遞狀態。您可以使用createContext函數創建一個上下文，然后通過setContext和getContext來設置和獲取上下文中的值。

// context.js
import { createContext } from 'svelte';

export const ThemeContext = createContext();

// App.svelte
<script>
  import { setContext } from 'svelte';
  import { ThemeContext } from './context.js';

  setContext(ThemeContext, 'light');
</script>

<p>{$theme}</p>

3. 使用第三方狀態管理庫：如果需要更復雜的狀態管理邏輯，您還可以選擇使用第三方狀態管理庫，比如redux-svelte、svelte-store等。這些庫提供了更豐富的功能和工具來管理應用的狀態。

// store.js
import { createStore } from 'redux-svelte';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

export const store = createStore(reducer, initialState);

// Counter.svelte
<script>
  import { store } from './store.js';

  const { count } = store.useState();
</script>

<button on:click={() => store.dispatch({ type: 'INCREMENT' })}>Increment</button>
<p>{$count}</p>

通過以上幾種方式，您可以根據項目的需求選擇最適合的狀態管理方式來管理應用的狀態。