生态与工程

问题：Options API 的逻辑碎片化 + Mixins 的命名冲突

Options API：搜索功能的代码分散在 data/methods/computed/watch 中 → 组件大了难以维护
Mixins：两个 Mixin 定义同名属性 → 互相覆盖 → 来源不明 → 调试困难

解决：Composition API + Composables

Composable：把搜索功能的所有逻辑（状态、方法、计算、侦听）聚合在一个函数中
显式调用：const { query, results, search } = useSearch() → 来源清晰

┌───────────────────────────────────────┐
│        Vuex（Vue 2 时代）              │
│  state → getters → mutations → actions│
│  必须通过 mutations 修改 state         │
│  模块化需要嵌套 module                 │
└─────────────────┬─────────────────────┘
                  │ 演进
                  ▼
┌───────────────────────────────────────┐
│        Pinia（Vue 3 时代）             │
│  state → getters → actions            │
│  直接在 actions 中修改 state           │
│  扁平化 store，无嵌套                  │
└───────────────────────────────────────┘

// Options API：搜索功能的代码分散在 4 个选项中
export default {
  data() {
    return { query: '', results: [] }      // 搜索状态
  },
  computed: {
    filteredResults() { ... }               // 搜索结果过滤
  },
  methods: {
    async search() { ... }                  // 搜索方法
  },
  watch: {
    query: { handler: debounce(...) }       // 搜索防抖
  }
}

// Composition API：搜索功能聚合在一个函数中
function useSearch() {
  const query = ref('')
  const results = ref([])
  const filteredResults = computed(() => ...)
  const search = async () => { ... }
  watch(query, debounce(...))
  return { query, results, filteredResults, search }
}

Vue 2 + Vuex（没有 Proxy）：
  state → actions → commit(mutation) → mutation 修改 state → DevTools 记录 mutation

Vue 3 + Pinia（有 Proxy）：
  state → actions 直接修改 state → Proxy 拦截 → DevTools 自动记录

对比：Pinia 少了 commit 这一步，但 DevTools 的追踪能力不变

// 全局前置守卫：检查登录状态
router.beforeEach((to, from) => {
  const isLoggedIn = !!localStorage.getItem("token");

  if (to.meta.requiresAuth && !isLoggedIn) {
    return { name: "login" }; // 未登录，跳转登录页
  }
});

1. 在失活的组件里调用 onBeforeRouteLeave
2. 调用全局的 beforeEach
3. 在复用的组件里调用 onBeforeRouteUpdate
4. 在路由配置里调用 beforeEnter
5. 解析异步路由组件
6. 在被激活的组件里调用 onBeforeRouteEnter
7. 调用全局的 beforeResolve
8. 导航被确认
9. 调用全局的 afterEach
10. 触发 DOM 更新

URL 变化（pushState / popstate / hashchange）
  ↓
遍历路由记录树，正则匹配 URL
  ↓
找到匹配的路由记录（组件 + 守卫）
  ↓
执行导航守卫链（beforeEach → beforeEnter → beforeResolve）
  ↓
解析异步组件（懒加载）
  ↓
调用 afterEach
  ↓
更新 router-view（patch 新组件，卸载旧组件）

// 简化的 store 创建流程
function createSetupStore(id, setup, options) {
  // 1. 用 reactive 包装 state
  const state = reactive({});

  // 2. 执行 setup 函数（或从 options 中提取 state）
  const setupResult = setup(state);

  // 3. 用 computed 包装 getters
  const getters = {};
  for (const key in options.getters) {
    getters[key] = computed(() => options.getters[key].call(store));
  }

  // 4. actions 就是普通函数，内部直接修改 state
  const actions = {};
  for (const key in options.actions) {
    actions[key] = options.actions[key].bind(store);
  }

  // 5. 组合成完整的 store
  const store = reactive({ ...state, ...getters, ...actions });
  return store;
}

┌─────────────────────────────────────────────────┐
│                   Vuex Store                      │
│                                                   │
│  ┌─────────┐    ┌──────────┐    ┌──────────────┐ │
│  │  State   │ ←  │ Mutations │ ←  │   Actions    │ │
│  │(响应式)  │    │ (同步)    │    │  (可异步)    │ │
│  └────┬─────┘    └──────────┘    └──────┬───────┘ │
│       │                                  ↑        │
│       ▼                                  │        │
│  ┌─────────┐                    ┌────────┴──────┐ │
│  │ Getters │                    │   Components  │ │
│  │(computed)│                    │  commit/dispatch│
│  └─────────┘                    └───────────────┘ │
└─────────────────────────────────────────────────┘

// Vuex 内部的 store 实现（简化）
class Store {
  constructor(options) {
    // 1. 把 getters 编译成 computed
    this.getters = {};
    const computed = {};
    forEachValue(options.getters, (fn, key) => {
      computed[key] = () => fn(this.state);
      Object.defineProperty(this.getters, key, {
        get: () => this._vm[key],
        enumerable: true,
      });
    });

    // 2. 用 Vue 的响应式系统包装 state，并把 computed 挂到同一个实例
    this._vm = new Vue({
      data: { $$state: options.state },
      computed,
    });

    // 3. 注册 mutations
    this._mutations = Object.create(null);
    forEachValue(options.mutations, (fn, key) => {
      this._mutations[key] = (payload) => {
        fn(this.state, payload);
      };
    });

    // 4. 注册 actions
    this._actions = Object.create(null);
    forEachValue(options.actions, (fn, key) => {
      this._actions[key] = (payload) => {
        fn(this, payload); // 注入 store 的 commit/dispatch
      };
    });
  }

  get state() {
    return this._vm._data.$$state;
  }

  commit(type, payload) {
    this._mutations[type](payload);
  }

  dispatch(type, payload) {
    this._actions[type](payload);
  }
}

// mutations 是同步的纯函数
mutations: {
  SET_USER(state, user) {
    state.user = user  // 直接修改 state
  },
  INCREMENT(state) {
    state.count++
  }
}

// actions 处理异步逻辑，然后 commit mutation
actions: {
  async fetchUser({ commit }, userId) {
    const user = await api.getUser(userId)
    commit('SET_USER', user)  // 异步完成后 commit
  }
}

┌─────────────────────────────────────────────────┐
│                   Pinia Store                      │
│                                                   │
│  ┌─────────┐    ┌──────────┐    ┌──────────────┐ │
│  │  State   │    │ Getters  │    │   Actions    │ │
│  │(reactive)│ ←  │(computed)│    │  (普通函数)   │ │
│  └────┬─────┘    └──────────┘    └──────┬───────┘ │
│       │                                  │        │
│       ▼                                  ▼        │
│  ┌─────────────────────────────────────────────┐  │
│  │         Proxy 拦截 → DevTools 自动追踪        │  │
│  └─────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘

// Pinia 的核心实现（简化）
function createSetupStore(id, setup, options, pinia) {
  // 1. 用 reactive 包装 state
  const state = pinia._s.get(id) || reactive({});

  // 2. 执行 setup 函数（或从 options 中提取 state）
  let store;
  if (typeof setup === "function") {
    // Setup Store：用户直接返回 state/getters/actions
    const setupResult = setup();
    store = reactive(setupResult);
  } else {
    // Options Store：从 options 中提取
    // state
    const initialState = options.state ? options.state() : {};
    Object.assign(state, initialState);

    // getters → computed
    const getters = {};
    for (const key in options.getters) {
      getters[key] = computed(() => {
        return options.getters[key].call(store, store);
      });
    }

    // actions → 普通函数（绑定 this）
    const actions = {};
    for (const key in options.actions) {
      actions[key] = options.actions[key].bind(store);
    }

    // 组合成完整的 store
    store = reactive({ ...state, ...getters, ...actions });
  }

  // 3. 缓存 store
  pinia._s.set(id, store);

  // 4. 注册到 DevTools
  registerStoreWithDevtools(pinia, store, id);

  return store;
}

// Pinia 的 store
const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++; // 直接修改，Proxy 拦截，DevTools 自动记录
    },
    async fetchCount() {
      this.count = await api.getCount(); // 异步也能直接修改
    },
  },
});

你的项目是什么情况？
│
├─ Vue 2 项目 → 用 Vuex 3（或 Pinia 2.x + @vue/composition-api）
│
├─ Vue 3 新项目 → 用 Pinia（官方推荐）
│
├─ Vue 3 老项目已用 Vuex → 可以继续用，不需要迁移
│
└─ 需要同时兼容 Vue 2 + Vue 3 → Vue 2 用 Vuex 3，Vue 3 用 Vuex 4 或 Pinia

// 简易 Vuex 实现（~50 行核心代码）
let _Vue = null;

class Store {
  constructor(options = {}) {
    // 1. 用 Vue 的响应式系统包装 state
    this._vm = new _Vue({
      data: {
        $$state: options.state || {},
      },
    });

    // 2. 编译 getters
    this.getters = Object.create(null);
    const getters = options.getters || {};
    Object.keys(getters).forEach((key) => {
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](this.state),
      });
    });

    // 3. 注册 mutations
    this._mutations = options.mutations || {};

    // 4. 注册 actions
    this._actions = options.actions || {};

    // 5. 绑定 commit/dispatch 的 this
    this.commit = this.commit.bind(this);
    this.dispatch = this.dispatch.bind(this);
  }

  get state() {
    return this._vm._data.$$state;
  }

  commit(type, payload) {
    const mutation = this._mutations[type];
    if (!mutation) throw new Error(`Mutation ${type} not found`);
    mutation(this.state, payload);
  }

  async dispatch(type, payload) {
    const action = this._actions[type];
    if (!action) throw new Error(`Action ${type} not found`);
    await action(this, payload);
  }

  // Vue.use(Store) 时调用
  static install(Vue) {
    _Vue = Vue;
    Vue.mixin({
      beforeCreate() {
        if (this.$options.store) {
          Vue.prototype.$store = this.$options.store;
        }
      },
    });
  }
}

// 简易 Pinia 实现（~40 行核心代码）
import { reactive, computed } from "vue";

let activePinia = null;

function createPinia() {
  const pinia = {
    _s: new Map(), // store 缓存
    install(app) {
      activePinia = pinia;
      app.provide("pinia", pinia);
    },
  };
  return pinia;
}

function defineStore(id, options) {
  return function useStore() {
    const pinia = activePinia;

    // 检查缓存
    if (pinia._s.has(id)) {
      return pinia._s.get(id);
    }

    // 创建 store
    const store = reactive({});

    // 1. 初始化 state
    const state = options.state ? options.state() : {};
    Object.assign(store, state);

    // 2. 编译 getters 为 computed
    if (options.getters) {
      Object.keys(options.getters).forEach((key) => {
        const getter = computed(() => {
          return options.getters[key].call(store, store);
        });
        Object.defineProperty(store, key, {
          get: () => getter.value,
        });
      });
    }

    // 3. 绑定 actions
    if (options.actions) {
      Object.keys(options.actions).forEach((key) => {
        store[key] = options.actions[key].bind(store);
      });
    }

    // 4. 缓存并返回
    pinia._s.set(id, store);
    return store;
  };
}

// 使用示例
const useCounter = defineStore("counter", {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});