vue-page-store 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 weijianjun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,180 @@
+# vue-page-store
+
+> Vue 2.6 页面级 Store —— 状态、通信、生命周期，一个作用域全收。
+
+## 为什么需要它？
+
+在微前端架构（single-spa / qiankun）下，复杂页面（仪表盘、漏斗分析、数据详情）的状态管理面临一个尴尬处境：
+
+| 方案 | 问题 |
+|------|------|
+| **Vuex** | 全局 store，页面销毁后状态残留，命名冲突，不适合页面级生命周期 |
+| **全局 EventBus** | 命名冲突、手动 $off 容易遗漏、事件扩散到全局 |
+| **provide / inject** | 只传数据，不管通信和副作用 |
+| **组件 data** | 跨组件共享困难，深层传递 props 地狱 |
+
+`vue-page-store` 解决的就是这个中间地带：**页面内部需要共享状态 + 通信 + 副作用管理，但不应该污染全局。**
+
+## 核心特性
+
+- **页面级作用域隔离** — 每个 store 独立一份 state 和事件，互不干扰
+- **`$destroy` 一键回收** — 页面销毁时自动清空 state、watchers、事件监听，零泄漏
+- **API 对齐 Pinia** — `state` / `getters` / `actions` / `$patch` / `$subscribe` / `$reset`，零学习成本
+- **内置作用域事件** — `$emit` / `$on` / `$off` 限定在当前 store 内，替代全局 EventBus
+- **声明式 watch** — 页面级副作用自动绑定生命周期
+- **TypeScript 支持** — 开箱即用的类型定义
+
+## 安装
+
+```bash
+npm install vue-page-store
+```
+
+> **前置条件**：项目中已安装 `vue@^2.6.0`
+
+## 快速上手
+
+### 1. 定义 Store
+
+```javascript
+// store.js
+import { definePageStore } from 'vue-page-store';
+
+export const useFunnelStore = definePageStore('funnelDetail', {
+  state: () => ({
+    filters: { dateRange: [], platform: '' },
+    loading: false,
+    funnelSteps: [],
+  }),
+
+  getters: {
+    isReady() {
+      return !this.loading && this.funnelSteps.length > 0;
+    },
+  },
+
+  actions: {
+    async fetchData() {
+      this.loading = true;
+      try {
+        this.funnelSteps = await api.getFunnelSteps(this.filters);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  watch: {
+    'filters.platform'(newVal) {
+      // platform 变了自动重新拉数据
+      this.fetchData();
+    },
+  },
+});
+```
+
+### 2. 组件中使用
+
+```javascript
+// 任意子组件
+export default {
+  computed: {
+    store() {
+      return useFunnelStore();
+    },
+    isReady() {
+      return this.store.isReady;
+    },
+  },
+  methods: {
+    handleSearch() {
+      this.store.$patch({ filters: this.localFilters });
+      this.store.fetchData();
+    },
+  },
+};
+```
+
+### 3. 页面内通信
+
+```javascript
+// 组件 A —— 发射事件
+this.store.$emit('filter:change', newFilters);
+
+// 组件 B —— 监听事件
+const off = this.store.$on('filter:change', (filters) => {
+  this.applyFilters(filters);
+});
+
+// 无需手动清理 —— $destroy 时自动回收
+```
+
+### 4. 页面销毁时回收
+
+```javascript
+// 页面根组件
+export default {
+  beforeDestroy() {
+    useFunnelStore().$destroy();
+  },
+};
+```
+
+## API
+
+### `definePageStore(id, options)`
+
+定义一个页面级 Store，返回 `useStore` 函数。
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `id` | `string` | 唯一标识 |
+| `options.state` | `() => Object` | 返回初始 state 的工厂函数 |
+| `options.getters` | `Object` | 计算属性，`this` 指向 store |
+| `options.actions` | `Object` | 方法，`this` 指向 store |
+| `options.watch` | `Object` | 声明式侦听，支持点路径 `'a.b.c'` |
+
+### Store 实例方法
+
+| 方法 | 说明 |
+|------|------|
+| `$patch(partial)` | 浅合并更新 state，接受对象或 `(state) => Object` 函数 |
+| `$subscribe(cb)` | 订阅 state 变化，返回取消函数 |
+| `$reset()` | 重置 state 到初始值 |
+| `$emit(event, payload?)` | 发射事件（仅当前 store 作用域） |
+| `$on(event, handler)` | 订阅事件，返回取消函数 |
+| `$off(event, handler?)` | 取消事件订阅（不传 handler 则取消该事件全部监听） |
+| `$destroy()` | 销毁 store，回收所有资源 |
+
+### `storeToRefs(store)`
+
+将 store 的 state 属性转为可解构的 refs 对象。
+
+```javascript
+import { storeToRefs } from 'vue-page-store';
+
+const store = useFunnelStore();
+const { filters, loading } = storeToRefs(store);
+```
+
+## 与 Pinia / Vuex 的关系
+
+这不是 Pinia 或 Vuex 的替代品，而是补充：
+
+| | Vuex | Pinia | vue-page-store |
+|---|---|---|---|
+| 作用域 | 全局 | 全局 | 页面级 |
+| 生命周期 | 应用级 | 应用级 | 页面级（手动 $destroy） |
+| 事件通信 | 无 | 无 | 内置 $emit/$on |
+| Vue 2.6 支持 | ✅ | ⚠️ 需 @vue/composition-api | ✅ 原生支持 |
+| 适用场景 | 用户信息、权限、全局配置 | 同 Vuex | 复杂页面内部状态 |
+
+**推荐组合**：Vuex 管全局，vue-page-store 管页面。
+
+## Vue 3
+
+本库专为 Vue 2.6 设计。Vue 3 项目推荐使用 [Pinia](https://pinia.vuejs.org/)。
+
+## License
+
+[MIT](./LICENSE)

package/dist/index.cjs.js

@@ -0,0 +1,264 @@
+/*!
+ * vue-page-store v0.1.0
+ * (c) 2026 weijianjun
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * vue-page-store - Vue 2.6 页面级 Store
+ *
+ * 状态、通信、生命周期，一个作用域全收。
+ *
+ * 与 Vuex 的区分：
+ *   Vuex        → 全局状态（用户信息、权限、路由等）
+ *   pageStore   → 页面级状态（仪表盘、漏斗详情等复杂页面内部状态）
+ *                 页面销毁时 $destroy 即可回收，不污染全局
+ *
+ * @author weijianjun
+ * @license MIT
+ */
+
+// Store 注册表（导出供调试 / devtools 使用）
+const storeRegistry = new Map();
+
+function createStoreInstance(Vue, id, options) {
+  const initialState = options.state();
+  const getters = options.getters || {};
+  const actions = options.actions || {};
+
+  // --- 用一个隐藏的 Vue 实例承载响应式 state + computed getters ---
+  const computedDefs = {};
+  const store = { _disposed: false };
+
+  Object.keys(getters).forEach(function (key) {
+    computedDefs[key] = function () {
+      return getters[key].call(store);
+    };
+  });
+
+  const vm = new Vue({
+    data: function () {
+      return { $$state: initialState };
+    },
+    computed: computedDefs,
+  });
+
+  const rawState = vm.$data.$$state;
+
+  // ====== state —— 代理到 vm.$$state ======
+  Object.keys(initialState).forEach(function (key) {
+    Object.defineProperty(store, key, {
+      enumerable: true,
+      get: function () { return rawState[key]; },
+      set: function (val) { rawState[key] = val; },
+    });
+  });
+
+  // ====== getters —— 代理到 vm computed ======
+  Object.keys(getters).forEach(function (key) {
+    Object.defineProperty(store, key, {
+      enumerable: true,
+      get: function () { return vm[key]; },
+    });
+  });
+
+  // ====== actions ======
+  Object.keys(actions).forEach(function (key) {
+    store[key] = actions[key].bind(store);
+  });
+
+  // ====== watch —— 声明式副作用，生命周期自动回收 ======
+  const watches = options.watch || {};
+  Object.entries(watches).forEach(function (_ref) {
+    const path = _ref[0];
+    const def = _ref[1];
+    const handler = typeof def === 'function' ? def : def.handler;
+    const watchOpts = { deep: true };
+    if (typeof def === 'object' && def.immediate) watchOpts.immediate = true;
+    const expr = function () {
+      return path.split('.').reduce(function (obj, k) { return obj && obj[k]; }, store);
+    };
+    vm.$watch(expr, handler.bind(store), watchOpts);
+  });
+
+  // ====== 内置方法 ======
+  store.$state = rawState;
+  store.$id = id;
+
+  /**
+   * 批量更新 state（浅合并语义）
+   * @param {Object|Function} partial - 要合并的对象，或 (state) => Object 函数
+   */
+  store.$patch = function (partial) {
+    const obj = typeof partial === 'function' ? partial(rawState) : partial;
+    Object.keys(obj).forEach(function (key) {
+      Vue.set(rawState, key, obj[key]);
+    });
+  };
+
+  /**
+   * 订阅 state 变化
+   * @param {Function} callback - (newState) => void
+   * @returns {Function} 取消订阅函数
+   */
+  store.$subscribe = function (callback) {
+    return vm.$watch(
+      function () { return Object.assign({}, rawState); },
+      callback,
+      { deep: true }
+    );
+  };
+
+  /**
+   * 重置 state 到初始值
+   */
+  store.$reset = function () {
+    const fresh = options.state();
+    Object.keys(fresh).forEach(function (key) {
+      rawState[key] = fresh[key];
+    });
+  };
+
+  // ====== 内置事件总线（页面作用域隔离通信） ======
+  const _listeners = {};
+
+  /**
+   * 发射事件（仅当前 store 作用域内）
+   * @param {string} event - 事件名
+   * @param {*} payload - 事件数据
+   */
+  store.$emit = function (event, payload) {
+    const fns = _listeners[event];
+    if (fns) fns.slice().forEach(function (fn) { fn(payload); });
+  };
+
+  /**
+   * 订阅事件
+   * @param {string} event - 事件名
+   * @param {Function} handler - 处理函数
+   * @returns {Function} 取消订阅函数
+   */
+  store.$on = function (event, handler) {
+    if (!_listeners[event]) _listeners[event] = [];
+    _listeners[event].push(handler);
+    return function () {
+      const idx = _listeners[event].indexOf(handler);
+      if (idx > -1) _listeners[event].splice(idx, 1);
+    };
+  };
+
+  /**
+   * 取消订阅指定事件的所有 handler，或指定 handler
+   * @param {string} event - 事件名
+   * @param {Function} [handler] - 可选，指定取消某个 handler
+   */
+  store.$off = function (event, handler) {
+    if (!_listeners[event]) return;
+    if (handler) {
+      const idx = _listeners[event].indexOf(handler);
+      if (idx > -1) _listeners[event].splice(idx, 1);
+    } else {
+      delete _listeners[event];
+    }
+  };
+
+  /**
+   * 销毁 store —— 清空事件、销毁 vm、移除注册
+   */
+  store.$destroy = function () {
+    store._disposed = true;
+    Object.keys(_listeners).forEach(function (key) { delete _listeners[key]; });
+    vm.$destroy();
+    storeRegistry.delete(id);
+  };
+
+  store._vm = vm;
+
+  return store;
+}
+
+/**
+ * 定义页面级 Store
+ *
+ * @param {string} id - 唯一标识
+ * @param {Object} options - { state, getters, actions, watch }
+ * @returns {Function} useStore - 调用即获取 / 创建 store 实例
+ *
+ * @example
+ * const useFunnelStore = definePageStore('funnelDetail', {
+ *   state: () => ({ filters: {}, loading: false }),
+ *   getters: {
+ *     isReady() { return !this.loading; }
+ *   },
+ *   actions: {
+ *     async fetchData() { ... }
+ *   }
+ * });
+ *
+ * // 组件中
+ * const store = useFunnelStore();
+ * store.fetchData();
+ *
+ * // 页面销毁时
+ * store.$destroy();
+ */
+function definePageStore(id, options) {
+  if (!id || typeof options.state !== 'function') {
+    throw new Error('[vue-page-store] 需要 id 和 state 函数');
+  }
+
+  // 缓存 Vue 引用，首次调用时从 store 的 vm 实例获取
+  let _Vue = null;
+
+  return function useStore() {
+    if (storeRegistry.has(id)) {
+      return storeRegistry.get(id);
+    }
+
+    // 自动获取 Vue 构造函数
+    if (!_Vue) {
+      try {
+        _Vue = require('vue');
+        if (_Vue.default) _Vue = _Vue.default;
+      } catch (e) {
+        throw new Error(
+          '[vue-page-store] 无法自动获取 Vue，请确保 vue 已安装'
+        );
+      }
+    }
+
+    const store = createStoreInstance(_Vue, id, options);
+    storeRegistry.set(id, store);
+    return store;
+  };
+}
+
+/**
+ * 将 store 的 state 属性转为可在模板中使用的 refs 对象
+ *
+ * @param {Object} store - pageStore 实例
+ * @returns {Object} refs 对象（可解构赋值到 computed）
+ *
+ * @example
+ * const { filters, loading } = storeToRefs(store);
+ */
+function storeToRefs(store) {
+  const refs = {};
+  Object.keys(store.$state).forEach(function (key) {
+    Object.defineProperty(refs, key, {
+      enumerable: true,
+      get: function () { return store[key]; },
+      set: function (val) { store[key] = val; },
+    });
+  });
+  return refs;
+}
+var index = { definePageStore, storeToRefs, storeRegistry };
+
+exports.default = index;
+exports.definePageStore = definePageStore;
+exports.storeRegistry = storeRegistry;
+exports.storeToRefs = storeToRefs;

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+/**
+ * vue-page-store - TypeScript 类型定义
+ */
+
+export interface StoreOptions<S extends Record<string, any>> {
+  /** 返回初始 state 的工厂函数 */
+  state: () => S;
+  /** 计算属性（getter 内部 this 指向 store） */
+  getters?: Record<string, (this: Store<S>) => any>;
+  /** 操作方法（action 内部 this 指向 store） */
+  actions?: Record<string, (this: Store<S>, ...args: any[]) => any>;
+  /** 声明式侦听器（支持点路径 'a.b.c' 或对象配置） */
+  watch?: Record<
+    string,
+    | ((this: Store<S>, newVal: any, oldVal: any) => void)
+    | {
+        handler: (this: Store<S>, newVal: any, oldVal: any) => void;
+        immediate?: boolean;
+      }
+  >;
+}
+
+export interface Store<S extends Record<string, any>> {
+  /** Store 唯一标识 */
+  readonly $id: string;
+  /** 原始响应式 state 对象 */
+  readonly $state: S;
+
+  /** 批量更新 state（浅合并） */
+  $patch(partial: Partial<S>): void;
+  $patch(fn: (state: S) => Partial<S>): void;
+
+  /** 订阅 state 变化 */
+  $subscribe(callback: (newState: S) => void): () => void;
+
+  /** 重置 state 到初始值 */
+  $reset(): void;
+
+  /** 发射事件（仅当前 store 作用域） */
+  $emit(event: string, payload?: any): void;
+
+  /** 订阅事件，返回取消函数 */
+  $on(event: string, handler: (payload?: any) => void): () => void;
+
+  /** 取消订阅事件 */
+  $off(event: string, handler?: (payload?: any) => void): void;
+
+  /** 销毁 store，释放所有资源 */
+  $destroy(): void;
+}
+
+/** Store 实例类型 = state 属性 + getters + actions + 内置方法 */
+export type PageStore<S extends Record<string, any>> = Store<S> & S;
+
+/**
+ * 定义页面级 Store
+ *
+ * @param id - 唯一标识
+ * @param options - store 配置
+ * @returns useStore 函数，调用即获取 / 创建 store 实例
+ */
+export declare function definePageStore<S extends Record<string, any>>(
+  id: string,
+  options: StoreOptions<S>
+): () => PageStore<S>;
+
+/**
+ * 将 store 的 state 属性转为 refs 对象
+ */
+export declare function storeToRefs<S extends Record<string, any>>(
+  store: PageStore<S>
+): { [K in keyof S]: S[K] };
+
+/** Store 注册表 */
+export declare const storeRegistry: Map<string, PageStore<any>>;

package/dist/index.esm.js

@@ -0,0 +1,257 @@
+/*!
+ * vue-page-store v0.1.0
+ * (c) 2026 weijianjun
+ * @license MIT
+ */
+/**
+ * vue-page-store - Vue 2.6 页面级 Store
+ *
+ * 状态、通信、生命周期，一个作用域全收。
+ *
+ * 与 Vuex 的区分：
+ *   Vuex        → 全局状态（用户信息、权限、路由等）
+ *   pageStore   → 页面级状态（仪表盘、漏斗详情等复杂页面内部状态）
+ *                 页面销毁时 $destroy 即可回收，不污染全局
+ *
+ * @author weijianjun
+ * @license MIT
+ */
+
+// Store 注册表（导出供调试 / devtools 使用）
+const storeRegistry = new Map();
+
+function createStoreInstance(Vue, id, options) {
+  const initialState = options.state();
+  const getters = options.getters || {};
+  const actions = options.actions || {};
+
+  // --- 用一个隐藏的 Vue 实例承载响应式 state + computed getters ---
+  const computedDefs = {};
+  const store = { _disposed: false };
+
+  Object.keys(getters).forEach(function (key) {
+    computedDefs[key] = function () {
+      return getters[key].call(store);
+    };
+  });
+
+  const vm = new Vue({
+    data: function () {
+      return { $$state: initialState };
+    },
+    computed: computedDefs,
+  });
+
+  const rawState = vm.$data.$$state;
+
+  // ====== state —— 代理到 vm.$$state ======
+  Object.keys(initialState).forEach(function (key) {
+    Object.defineProperty(store, key, {
+      enumerable: true,
+      get: function () { return rawState[key]; },
+      set: function (val) { rawState[key] = val; },
+    });
+  });
+
+  // ====== getters —— 代理到 vm computed ======
+  Object.keys(getters).forEach(function (key) {
+    Object.defineProperty(store, key, {
+      enumerable: true,
+      get: function () { return vm[key]; },
+    });
+  });
+
+  // ====== actions ======
+  Object.keys(actions).forEach(function (key) {
+    store[key] = actions[key].bind(store);
+  });
+
+  // ====== watch —— 声明式副作用，生命周期自动回收 ======
+  const watches = options.watch || {};
+  Object.entries(watches).forEach(function (_ref) {
+    const path = _ref[0];
+    const def = _ref[1];
+    const handler = typeof def === 'function' ? def : def.handler;
+    const watchOpts = { deep: true };
+    if (typeof def === 'object' && def.immediate) watchOpts.immediate = true;
+    const expr = function () {
+      return path.split('.').reduce(function (obj, k) { return obj && obj[k]; }, store);
+    };
+    vm.$watch(expr, handler.bind(store), watchOpts);
+  });
+
+  // ====== 内置方法 ======
+  store.$state = rawState;
+  store.$id = id;
+
+  /**
+   * 批量更新 state（浅合并语义）
+   * @param {Object|Function} partial - 要合并的对象，或 (state) => Object 函数
+   */
+  store.$patch = function (partial) {
+    const obj = typeof partial === 'function' ? partial(rawState) : partial;
+    Object.keys(obj).forEach(function (key) {
+      Vue.set(rawState, key, obj[key]);
+    });
+  };
+
+  /**
+   * 订阅 state 变化
+   * @param {Function} callback - (newState) => void
+   * @returns {Function} 取消订阅函数
+   */
+  store.$subscribe = function (callback) {
+    return vm.$watch(
+      function () { return Object.assign({}, rawState); },
+      callback,
+      { deep: true }
+    );
+  };
+
+  /**
+   * 重置 state 到初始值
+   */
+  store.$reset = function () {
+    const fresh = options.state();
+    Object.keys(fresh).forEach(function (key) {
+      rawState[key] = fresh[key];
+    });
+  };
+
+  // ====== 内置事件总线（页面作用域隔离通信） ======
+  const _listeners = {};
+
+  /**
+   * 发射事件（仅当前 store 作用域内）
+   * @param {string} event - 事件名
+   * @param {*} payload - 事件数据
+   */
+  store.$emit = function (event, payload) {
+    const fns = _listeners[event];
+    if (fns) fns.slice().forEach(function (fn) { fn(payload); });
+  };
+
+  /**
+   * 订阅事件
+   * @param {string} event - 事件名
+   * @param {Function} handler - 处理函数
+   * @returns {Function} 取消订阅函数
+   */
+  store.$on = function (event, handler) {
+    if (!_listeners[event]) _listeners[event] = [];
+    _listeners[event].push(handler);
+    return function () {
+      const idx = _listeners[event].indexOf(handler);
+      if (idx > -1) _listeners[event].splice(idx, 1);
+    };
+  };
+
+  /**
+   * 取消订阅指定事件的所有 handler，或指定 handler
+   * @param {string} event - 事件名
+   * @param {Function} [handler] - 可选，指定取消某个 handler
+   */
+  store.$off = function (event, handler) {
+    if (!_listeners[event]) return;
+    if (handler) {
+      const idx = _listeners[event].indexOf(handler);
+      if (idx > -1) _listeners[event].splice(idx, 1);
+    } else {
+      delete _listeners[event];
+    }
+  };
+
+  /**
+   * 销毁 store —— 清空事件、销毁 vm、移除注册
+   */
+  store.$destroy = function () {
+    store._disposed = true;
+    Object.keys(_listeners).forEach(function (key) { delete _listeners[key]; });
+    vm.$destroy();
+    storeRegistry.delete(id);
+  };
+
+  store._vm = vm;
+
+  return store;
+}
+
+/**
+ * 定义页面级 Store
+ *
+ * @param {string} id - 唯一标识
+ * @param {Object} options - { state, getters, actions, watch }
+ * @returns {Function} useStore - 调用即获取 / 创建 store 实例
+ *
+ * @example
+ * const useFunnelStore = definePageStore('funnelDetail', {
+ *   state: () => ({ filters: {}, loading: false }),
+ *   getters: {
+ *     isReady() { return !this.loading; }
+ *   },
+ *   actions: {
+ *     async fetchData() { ... }
+ *   }
+ * });
+ *
+ * // 组件中
+ * const store = useFunnelStore();
+ * store.fetchData();
+ *
+ * // 页面销毁时
+ * store.$destroy();
+ */
+function definePageStore(id, options) {
+  if (!id || typeof options.state !== 'function') {
+    throw new Error('[vue-page-store] 需要 id 和 state 函数');
+  }
+
+  // 缓存 Vue 引用，首次调用时从 store 的 vm 实例获取
+  let _Vue = null;
+
+  return function useStore() {
+    if (storeRegistry.has(id)) {
+      return storeRegistry.get(id);
+    }
+
+    // 自动获取 Vue 构造函数
+    if (!_Vue) {
+      try {
+        _Vue = require('vue');
+        if (_Vue.default) _Vue = _Vue.default;
+      } catch (e) {
+        throw new Error(
+          '[vue-page-store] 无法自动获取 Vue，请确保 vue 已安装'
+        );
+      }
+    }
+
+    const store = createStoreInstance(_Vue, id, options);
+    storeRegistry.set(id, store);
+    return store;
+  };
+}
+
+/**
+ * 将 store 的 state 属性转为可在模板中使用的 refs 对象
+ *
+ * @param {Object} store - pageStore 实例
+ * @returns {Object} refs 对象（可解构赋值到 computed）
+ *
+ * @example
+ * const { filters, loading } = storeToRefs(store);
+ */
+function storeToRefs(store) {
+  const refs = {};
+  Object.keys(store.$state).forEach(function (key) {
+    Object.defineProperty(refs, key, {
+      enumerable: true,
+      get: function () { return store[key]; },
+      set: function (val) { store[key] = val; },
+    });
+  });
+  return refs;
+}
+var index = { definePageStore, storeToRefs, storeRegistry };
+
+export { index as default, definePageStore, storeRegistry, storeToRefs };

package/dist/index.umd.js

@@ -0,0 +1,270 @@
+/*!
+ * vue-page-store v0.1.0
+ * (c) 2026 weijianjun
+ * @license MIT
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VuePageStore = {}));
+})(this, (function (exports) { 'use strict';
+
+  /**
+   * vue-page-store - Vue 2.6 页面级 Store
+   *
+   * 状态、通信、生命周期，一个作用域全收。
+   *
+   * 与 Vuex 的区分：
+   *   Vuex        → 全局状态（用户信息、权限、路由等）
+   *   pageStore   → 页面级状态（仪表盘、漏斗详情等复杂页面内部状态）
+   *                 页面销毁时 $destroy 即可回收，不污染全局
+   *
+   * @author weijianjun
+   * @license MIT
+   */
+
+  // Store 注册表（导出供调试 / devtools 使用）
+  const storeRegistry = new Map();
+
+  function createStoreInstance(Vue, id, options) {
+    const initialState = options.state();
+    const getters = options.getters || {};
+    const actions = options.actions || {};
+
+    // --- 用一个隐藏的 Vue 实例承载响应式 state + computed getters ---
+    const computedDefs = {};
+    const store = { _disposed: false };
+
+    Object.keys(getters).forEach(function (key) {
+      computedDefs[key] = function () {
+        return getters[key].call(store);
+      };
+    });
+
+    const vm = new Vue({
+      data: function () {
+        return { $$state: initialState };
+      },
+      computed: computedDefs,
+    });
+
+    const rawState = vm.$data.$$state;
+
+    // ====== state —— 代理到 vm.$$state ======
+    Object.keys(initialState).forEach(function (key) {
+      Object.defineProperty(store, key, {
+        enumerable: true,
+        get: function () { return rawState[key]; },
+        set: function (val) { rawState[key] = val; },
+      });
+    });
+
+    // ====== getters —— 代理到 vm computed ======
+    Object.keys(getters).forEach(function (key) {
+      Object.defineProperty(store, key, {
+        enumerable: true,
+        get: function () { return vm[key]; },
+      });
+    });
+
+    // ====== actions ======
+    Object.keys(actions).forEach(function (key) {
+      store[key] = actions[key].bind(store);
+    });
+
+    // ====== watch —— 声明式副作用，生命周期自动回收 ======
+    const watches = options.watch || {};
+    Object.entries(watches).forEach(function (_ref) {
+      const path = _ref[0];
+      const def = _ref[1];
+      const handler = typeof def === 'function' ? def : def.handler;
+      const watchOpts = { deep: true };
+      if (typeof def === 'object' && def.immediate) watchOpts.immediate = true;
+      const expr = function () {
+        return path.split('.').reduce(function (obj, k) { return obj && obj[k]; }, store);
+      };
+      vm.$watch(expr, handler.bind(store), watchOpts);
+    });
+
+    // ====== 内置方法 ======
+    store.$state = rawState;
+    store.$id = id;
+
+    /**
+     * 批量更新 state（浅合并语义）
+     * @param {Object|Function} partial - 要合并的对象，或 (state) => Object 函数
+     */
+    store.$patch = function (partial) {
+      const obj = typeof partial === 'function' ? partial(rawState) : partial;
+      Object.keys(obj).forEach(function (key) {
+        Vue.set(rawState, key, obj[key]);
+      });
+    };
+
+    /**
+     * 订阅 state 变化
+     * @param {Function} callback - (newState) => void
+     * @returns {Function} 取消订阅函数
+     */
+    store.$subscribe = function (callback) {
+      return vm.$watch(
+        function () { return Object.assign({}, rawState); },
+        callback,
+        { deep: true }
+      );
+    };
+
+    /**
+     * 重置 state 到初始值
+     */
+    store.$reset = function () {
+      const fresh = options.state();
+      Object.keys(fresh).forEach(function (key) {
+        rawState[key] = fresh[key];
+      });
+    };
+
+    // ====== 内置事件总线（页面作用域隔离通信） ======
+    const _listeners = {};
+
+    /**
+     * 发射事件（仅当前 store 作用域内）
+     * @param {string} event - 事件名
+     * @param {*} payload - 事件数据
+     */
+    store.$emit = function (event, payload) {
+      const fns = _listeners[event];
+      if (fns) fns.slice().forEach(function (fn) { fn(payload); });
+    };
+
+    /**
+     * 订阅事件
+     * @param {string} event - 事件名
+     * @param {Function} handler - 处理函数
+     * @returns {Function} 取消订阅函数
+     */
+    store.$on = function (event, handler) {
+      if (!_listeners[event]) _listeners[event] = [];
+      _listeners[event].push(handler);
+      return function () {
+        const idx = _listeners[event].indexOf(handler);
+        if (idx > -1) _listeners[event].splice(idx, 1);
+      };
+    };
+
+    /**
+     * 取消订阅指定事件的所有 handler，或指定 handler
+     * @param {string} event - 事件名
+     * @param {Function} [handler] - 可选，指定取消某个 handler
+     */
+    store.$off = function (event, handler) {
+      if (!_listeners[event]) return;
+      if (handler) {
+        const idx = _listeners[event].indexOf(handler);
+        if (idx > -1) _listeners[event].splice(idx, 1);
+      } else {
+        delete _listeners[event];
+      }
+    };
+
+    /**
+     * 销毁 store —— 清空事件、销毁 vm、移除注册
+     */
+    store.$destroy = function () {
+      store._disposed = true;
+      Object.keys(_listeners).forEach(function (key) { delete _listeners[key]; });
+      vm.$destroy();
+      storeRegistry.delete(id);
+    };
+
+    store._vm = vm;
+
+    return store;
+  }
+
+  /**
+   * 定义页面级 Store
+   *
+   * @param {string} id - 唯一标识
+   * @param {Object} options - { state, getters, actions, watch }
+   * @returns {Function} useStore - 调用即获取 / 创建 store 实例
+   *
+   * @example
+   * const useFunnelStore = definePageStore('funnelDetail', {
+   *   state: () => ({ filters: {}, loading: false }),
+   *   getters: {
+   *     isReady() { return !this.loading; }
+   *   },
+   *   actions: {
+   *     async fetchData() { ... }
+   *   }
+   * });
+   *
+   * // 组件中
+   * const store = useFunnelStore();
+   * store.fetchData();
+   *
+   * // 页面销毁时
+   * store.$destroy();
+   */
+  function definePageStore(id, options) {
+    if (!id || typeof options.state !== 'function') {
+      throw new Error('[vue-page-store] 需要 id 和 state 函数');
+    }
+
+    // 缓存 Vue 引用，首次调用时从 store 的 vm 实例获取
+    let _Vue = null;
+
+    return function useStore() {
+      if (storeRegistry.has(id)) {
+        return storeRegistry.get(id);
+      }
+
+      // 自动获取 Vue 构造函数
+      if (!_Vue) {
+        try {
+          _Vue = require('vue');
+          if (_Vue.default) _Vue = _Vue.default;
+        } catch (e) {
+          throw new Error(
+            '[vue-page-store] 无法自动获取 Vue，请确保 vue 已安装'
+          );
+        }
+      }
+
+      const store = createStoreInstance(_Vue, id, options);
+      storeRegistry.set(id, store);
+      return store;
+    };
+  }
+
+  /**
+   * 将 store 的 state 属性转为可在模板中使用的 refs 对象
+   *
+   * @param {Object} store - pageStore 实例
+   * @returns {Object} refs 对象（可解构赋值到 computed）
+   *
+   * @example
+   * const { filters, loading } = storeToRefs(store);
+   */
+  function storeToRefs(store) {
+    const refs = {};
+    Object.keys(store.$state).forEach(function (key) {
+      Object.defineProperty(refs, key, {
+        enumerable: true,
+        get: function () { return store[key]; },
+        set: function (val) { store[key] = val; },
+      });
+    });
+    return refs;
+  }
+  var index = { definePageStore, storeToRefs, storeRegistry };
+
+  exports.default = index;
+  exports.definePageStore = definePageStore;
+  exports.storeRegistry = storeRegistry;
+  exports.storeToRefs = storeToRefs;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/dist/index.umd.min.js

@@ -0,0 +1,19 @@
+/*!
+ * vue-page-store v0.1.0
+ * (c) 2026 weijianjun
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VuePageStore={})}(this,function(e){"use strict";
+/**
+   * vue-page-store - Vue 2.6 页面级 Store
+   *
+   * 状态、通信、生命周期，一个作用域全收。
+   *
+   * 与 Vuex 的区分：
+   *   Vuex        → 全局状态（用户信息、权限、路由等）
+   *   pageStore   → 页面级状态（仪表盘、漏斗详情等复杂页面内部状态）
+   *                 页面销毁时 $destroy 即可回收，不污染全局
+   *
+   * @author weijianjun
+   * @license MIT
+   */const t=new Map;function n(e,n){if(!e||"function"!=typeof n.state)throw new Error("[vue-page-store] 需要 id 和 state 函数");let o=null;return function(){if(t.has(e))return t.get(e);if(!o)try{o=require("vue"),o.default&&(o=o.default)}catch(e){throw new Error("[vue-page-store] 无法自动获取 Vue，请确保 vue 已安装")}const c=function(e,n,o){const c=o.state(),r=o.getters||{},f=o.actions||{},i={},u={_disposed:!1};Object.keys(r).forEach(function(e){i[e]=function(){return r[e].call(u)}});const s=new e({data:function(){return{$$state:c}},computed:i}),a=s.$data.$$state;Object.keys(c).forEach(function(e){Object.defineProperty(u,e,{enumerable:!0,get:function(){return a[e]},set:function(t){a[e]=t}})}),Object.keys(r).forEach(function(e){Object.defineProperty(u,e,{enumerable:!0,get:function(){return s[e]}})}),Object.keys(f).forEach(function(e){u[e]=f[e].bind(u)});const d=o.watch||{};Object.entries(d).forEach(function(e){const t=e[0],n=e[1],o="function"==typeof n?n:n.handler,c={deep:!0};"object"==typeof n&&n.immediate&&(c.immediate=!0),s.$watch(function(){return t.split(".").reduce(function(e,t){return e&&e[t]},u)},o.bind(u),c)}),u.$state=a,u.$id=n,u.$patch=function(t){const n="function"==typeof t?t(a):t;Object.keys(n).forEach(function(t){e.set(a,t,n[t])})},u.$subscribe=function(e){return s.$watch(function(){return Object.assign({},a)},e,{deep:!0})},u.$reset=function(){const e=o.state();Object.keys(e).forEach(function(t){a[t]=e[t]})};const l={};return u.$emit=function(e,t){const n=l[e];n&&n.slice().forEach(function(e){e(t)})},u.$on=function(e,t){return l[e]||(l[e]=[]),l[e].push(t),function(){const n=l[e].indexOf(t);n>-1&&l[e].splice(n,1)}},u.$off=function(e,t){if(l[e])if(t){const n=l[e].indexOf(t);n>-1&&l[e].splice(n,1)}else delete l[e]},u.$destroy=function(){u._disposed=!0,Object.keys(l).forEach(function(e){delete l[e]}),s.$destroy(),t.delete(n)},u._vm=s,u}(o,e,n);return t.set(e,c),c}}function o(e){const t={};return Object.keys(e.$state).forEach(function(n){Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]},set:function(t){e[n]=t}})}),t}var c={definePageStore:n,storeToRefs:o,storeRegistry:t};e.default=c,e.definePageStore=n,e.storeRegistry=t,e.storeToRefs=o,Object.defineProperty(e,"__esModule",{value:!0})});

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "vue-page-store",
+  "version": "0.1.0",
+  "description": "Vue 2.6 页面级 Store —— 状态、通信、生命周期，一个作用域全收",
+  "author": "weijianjun",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs && cp src/index.d.ts dist/index.d.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0"
+  },
+  "devDependencies": {
+    "rollup": "^3.29.4",
+    "@rollup/plugin-terser": "^0.4.4"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "store",
+    "state-management",
+    "page-store",
+    "micro-frontend",
+    "single-spa"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weijianjunwjj/vue-page-store.git"
+  }
+}