框架集成：21 框架状态管理与HTML - 详细教程与实战指南

// 状态管理的三个层次：

// 1. 组件本地状态（简单场景）
// React: useState
// Vue: ref/reactive
// Angular: 组件属性
// Svelte: let

// 2. 跨组件共享状态（中等场景）
// React: Context API
// Vue: Provide/Inject
// Angular: Services
// Svelte: Stores

// 3. 全局状态管理（复杂场景）
// React: Redux / Zustand / Jotai
// Vue: Pinia / Vuex
// Angular: NgRx / Signals
// Svelte: Stores（内置足够）

// 1. Context API（内置，适合简单共享）
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
      <Main />
    </ThemeContext.Provider>
  );
}

function Header() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>主题: {theme}</div>;
}

// 2. Zustand（轻量，推荐）
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  user: null,
  increment: () => set((state) => ({ count: state.count + 1 })),
  setUser: (user) => set({ user }),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

// 3. Redux Toolkit（企业级）
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
  },
});

const store = configureStore({ reducer: { counter: counterSlice.reducer } });

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+1</button>
    </div>
  );
}

// Pinia（Vue官方推荐）
import { defineStore } from 'pinia';

// Option Store
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Pinia' }),
  getters: {
    doubled: (state) => state.count * 2,
  },
  actions: {
    increment() { this.count++; },
    async fetchCount() {
      const res = await fetch('/api/count');
      this.count = await res.json();
    },
  },
});

// Setup Store（推荐，更灵活）
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  function increment() { count.value++; }
  return { count, doubled, increment };
});

// 组件中使用
const counter = useCounterStore();
counter.increment();
counter.count;       // 直接访问state
counter.doubled;     // 访问getter

// Store间互相引用
const userStore = useUserStore();
const cartStore = useCartStore();
// 在cartStore的action中可以调用userStore

// Store持久化（pinia-plugin-persistedstate）
export const useUserStore = defineStore('user', () => {
  const token = ref('');
  return { token };
}, {
  persist: true,  // 自动持久化到localStorage
});

// Angular Services + Signals（Angular 16+）
@Injectable({ providedIn: 'root' })
export class CartService {
  // 使用Signals（推荐）
  private items = signal<CartItem[]>([]);
  readonly items = this.items.asReadonly();

  readonly total = computed(() =>
    this.items().reduce((sum, item) => sum + item.price * item.qty, 0)
  );

  addItem(item: CartItem) {
    this.items.update(items => [...items, item]);
  }

  removeItem(id: number) {
    this.items.update(items => items.filter(i => i.id !== id));
  }
}

// 组件中使用
export class CartComponent {
  cart = inject(CartService);
  // 模板中: {{ cart.items() }}
  //         {{ cart.total() }}
}

// NgRx（Angular的Redux）
// 适合大型企业应用，概念与Redux类似
// Actions → Reducers → Selectors → Effects

// Svelte Stores（内置，简洁强大）
import { writable, derived, readable } from 'svelte/store';

// writable store
const count = writable(0);
count.set(10);           // 设置值
count.update(n => n+1);  // 更新值

// derived store
const doubled = derived(count, $count => $count * 2);

// readable store（只读）
const time = readable(new Date(), (set) => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

// 自定义store
function createCount() {
  const { subscribe, set, update } = writable(0);
  return {
    subscribe,
    increment: () => update(n => n + 1),
    decrement: () => update(n => n - 1),
    reset: () => set(0),
  };
}
const counter = createCount();

// 组件中使用$前缀自动订阅
<script>
  import { counter } from './stores';
</script>
<p>{$counter}</p>
<button on:click={counter.increment}>+1</button>