Pinia 与状态管理

// store/counter.ts
import { reactive } from 'vue';
export const store = reactive({ count: 0, inc() { this.count++; } });

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
 
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);                       // state
  const double = computed(() => count.value * 2); // getter
  function inc() { count.value++; }            // action
  function reset() { count.value = 0; }
  return { count, double, inc, reset };
});

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore(); // 拿到的就是响应式 store
</script>
 
<template>
  <p>{{ counter.count }} / {{ counter.double }}</p>
  <button @click="counter.inc()">+1</button>
</template>

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (s) => s.count * 2 },
  actions: { inc() { this.count++; } },
});

const s = useCounterStore();
s.count = 1;                 // 直接改（字段级响应）
s.$patch({ count: 2, name: 'Ada' }); // 批量改，内部合并
s.$patch((state) => { state.count++; }); // 函数式批量改

s.$subscribe((mutation, state) => {
  // 任何 state 变动都触发，适合做持久化
  localStorage.setItem('counter', JSON.stringify(state));
});

import { storeToRefs } from 'pinia';
const { count, double } = storeToRefs(useCounterStore()); // 都是 ref，保持响应
const { inc } = useCounterStore(); // action 直接拿，不是 ref

// ============ 迷你响应核心 ============
type Dep = Set<Effect>;
const targetMap = new WeakMap<object, Map<PropertyKey, Dep>>();
let activeEffect: Effect | null = null;
interface Effect { deps: Dep[]; scheduler?: () => void; run: () => void; }
function cleanup(e: Effect): void {
  for (const d of e.deps) d.delete(e);
  e.deps.length = 0;
}
function effect(fn: () => void, options?: { scheduler?: () => void }): Effect {
  const e: Effect = {
    deps: [],
    scheduler: options?.scheduler,
    run: () => {
      cleanup(e);
      activeEffect = e;
      try { fn(); } finally { activeEffect = null; }
    },
  };
  e.run();
  return e;
}
function track(target: object, key: PropertyKey): void {
  if (!activeEffect) return;
  let m = targetMap.get(target);
  if (!m) { m = new Map(); targetMap.set(target, m); }
  let dep = m.get(key);
  if (!dep) { dep = new Set(); m.set(key, dep); }
  dep.add(activeEffect);
  activeEffect.deps.push(dep);
}
function trigger(target: object, key: PropertyKey): void {
  const m = targetMap.get(target);
  if (!m) return;
  const dep = m.get(key);
  if (!dep) return;
  for (const e of [...dep]) {
    if (e === activeEffect) continue;
    if (e.scheduler) e.scheduler(); // 依赖变了：只翻脏标记+通知订阅者，不重跑 getter
    else e.run();
  }
}
function isObject(v: unknown): v is object { return typeof v === 'object' && v !== null; }
 
const REF = Symbol('ref');
function isRef(v: any): boolean { return v != null && typeof v === 'object' && v[REF] === true; }
 
function reactive<T extends object>(target: T): T {
  if (!isObject(target)) return target;
  return new Proxy(target, {
    get(obj: any, key: PropertyKey, receiver: any) {
      const res = Reflect.get(obj, key, receiver);
      if (isRef(res)) return res.value; // 自动解包 ref
      track(obj, key);
      return isObject(res) ? reactive(res) : res;
    },
    set(obj: any, key: PropertyKey, value: any, receiver: any) {
      const old = obj[key];
      if (isRef(old) && !isRef(value)) { old.value = value; return true; }
      const had = Object.prototype.hasOwnProperty.call(obj, key);
      const r = Reflect.set(obj, key, value, receiver);
      if (!had || !Object.is(old, value)) trigger(obj, key);
      return r;
    },
  });
}
interface Ref<T> { get value(): T; set value(v: T); }
function ref<T>(initial: T): Ref<T> {
  const r = reactive({ value: initial });
  (r as any)[REF] = true;
  return r as unknown as Ref<T>;
}
function computed<T>(getter: () => T): Ref<T> {
  let value: T;
  let dirty = true;
  const subs = new Set<Effect>();
  // runner 才是真正跑 getter 的 effect；它的 scheduler 在「依赖变了」时只翻脏标记并通知订阅者
  const runner = effect(
    () => { value = getter(); dirty = false; },
    {
      scheduler: () => {
        if (!dirty) { dirty = true; for (const e of [...subs]) e.run(); }
      },
    },
  );
  const c: any = {
    get value() {
      if (activeEffect) { subs.add(activeEffect); activeEffect.deps.push(subs); }
      if (dirty) runner.run(); // 读时才重算，并重新收集依赖
      return value;
    },
    set value(_v: T) { throw new Error('computed is readonly'); },
  };
  c[REF] = true;
  return c as Ref<T>;
}
 
// ============ 迷你 Pinia ============
function defineStore(id: string, setup: () => Record<string, any>): () => any {
  let instance: any = null;
  return () => {
    if (instance) return instance;
    const raw = setup();
    const subs: (() => void)[] = [];
    instance = reactive({
      ...raw,
      $patch(partial: Record<string, any>) {
        Object.assign(instance, partial);
        for (const cb of subs) cb();
      },
      $subscribe(cb: () => void) { subs.push(cb); },
    });
    return instance;
  };
}
 
// ===== 测试：一个购物车 store =====
const useCart = defineStore('cart', () => {
  const items = ref<{ name: string; price: number }[]>([]);
  const total = computed(() => items.value.reduce((s, i) => s + i.price, 0));
  function add(name: string, price: number) { items.value = [...items.value, { name, price }]; }
  return { items, total, add };
});
 
const cart = useCart();
let runs = 0;
effect(() => { runs++; console.log("[cart] total=" + cart.total); });
let subRuns = 0;
cart.$subscribe(() => { subRuns++; console.log("[sub] total now " + cart.total); });
 
cart.add('apple', 3);
cart.add('banana', 2);
cart.$patch({ items: [...cart.items, { name: 'cherry', price: 4 }] });
console.log("subRuns = " + subRuns);
console.log("runs = " + runs);