vue-page-store 0.1.0 → 0.2.1

package/README.md

@@ -13,16 +13,16 @@
 | **provide / inject** | 只传数据，不管通信和副作用 |
 | **组件 data** | 跨组件共享困难，深层传递 props 地狱 |
 
-`vue-page-store` 解决的就是这个中间地带：**页面内部需要共享状态 + 通信 + 副作用管理，但不应该污染全局。**
+`vue-page-store` 解决的就是这个中间地带：**页面内部需要共享状态 + 通信 + 生命周期管理，但不应该污染全局。**
 
 ## 核心特性
 
 - **页面级作用域隔离** — 每个 store 独立一份 state 和事件，互不干扰
-- **`$destroy` 一键回收** — 页面销毁时自动清空 state、watchers、事件监听，零泄漏
-- **API 对齐 Pinia** — `state` / `getters` / `actions` / `$patch` / `$subscribe` / `$reset`，零学习成本
+- **`useStore(this)` 一行绑定** — 自动挂载生命周期，自动销毁，零手动清理
+- **页面生命周期** — `mount` / `unmount` / `activate` / `deactivate`，keep-alive 原生支持
+- **API 对齐 Pinia** — `state` / `getters` / `actions` / `$patch` / `$reset`，零学习成本
 - **内置作用域事件** — `$emit` / `$on` / `$off` 限定在当前 store 内，替代全局 EventBus
 - **声明式 watch** — 页面级副作用自动绑定生命周期
-- **TypeScript 支持** — 开箱即用的类型定义
 
 ## 安装
 
@@ -37,7 +37,6 @@ npm install vue-page-store
 ### 1. 定义 Store
 
 ```javascript
-// store.js
 import { definePageStore } from 'vue-page-store';
 
 export const useFunnelStore = definePageStore('funnelDetail', {
@@ -66,26 +65,38 @@ export const useFunnelStore = definePageStore('funnelDetail', {
 
   watch: {
     'filters.platform'(newVal) {
-      // platform 变了自动重新拉数据
       this.fetchData();
     },
   },
+
+  // 0.2.0 新增：页面生命周期
+  lifecycle: {
+    mount() {
+      // 页面挂载时自动拉数据
+      this.fetchData();
+    },
+    unmount() {
+      console.log('页面销毁');
+    },
+  },
 });
 ```
 
 ### 2. 组件中使用
 
 ```javascript
-// 任意子组件
 export default {
+  created() {
+    // 传 this → 自动绑定生命周期 + 自动销毁，不需要 beforeDestroy
+    this.store = useFunnelStore(this);
+  },
+
   computed: {
-    store() {
-      return useFunnelStore();
-    },
     isReady() {
       return this.store.isReady;
     },
   },
+
   methods: {
     handleSearch() {
       this.store.$patch({ filters: this.localFilters });
@@ -95,6 +106,8 @@ export default {
 };
 ```
 
+> **不传 `this`** 也完全可以，行为和 0.1.0 一样，需要自己在 `beforeDestroy` 里调 `$destroy()`。
+
 ### 3. 页面内通信
 
 ```javascript
@@ -109,15 +122,73 @@ const off = this.store.$on('filter:change', (filters) => {
 // 无需手动清理 —— $destroy 时自动回收
 ```
 
-### 4. 页面销毁时回收
+## 页面生命周期（0.2.0）
+
+通过 `useStore(this)` 传入组件实例，store 会自动绑定到组件的生命周期：
+
+| 组件钩子 | store 行为 | `$status` 变化 |
+|----------|-----------|---------------|
+| `mounted` | 调用 `lifecycle.mount` | `mounted: true, active: true` |
+| `activated` | 调用 `lifecycle.activate` | `active: true` |
+| `deactivated` | 调用 `lifecycle.deactivate` | `active: false` |
+| `beforeDestroy` | 自动调 `$destroy()`，触发 `lifecycle.unmount` | `mounted: false, active: false` |
+
+### 无 keep-alive
+
+```
+mounted → lifecycle.mount → ... → beforeDestroy → lifecycle.unmount
+```
+
+### 有 keep-alive
+
+```
+mounted → lifecycle.mount
+  → deactivated → lifecycle.deactivate
+  → activated → lifecycle.activate
+  → deactivated → lifecycle.deactivate
+  → activated → lifecycle.activate
+  → ... 反复切换 ...
+  → beforeDestroy → lifecycle.unmount
+```
+
+### keep-alive 示例
 
 ```javascript
-// 页面根组件
-export default {
-  beforeDestroy() {
-    useFunnelStore().$destroy();
+export const useListStore = definePageStore('listPage', {
+  state: () => ({
+    list: [],
+    needRefresh: false,
+  }),
+
+  actions: {
+    async fetchList() {
+      this.list = await api.getList();
+      this.needRefresh = false;
+    },
   },
-};
+
+  lifecycle: {
+    mount() {
+      this.fetchList();
+    },
+    activate() {
+      // 从缓存恢复时，按需刷新
+      if (this.needRefresh) this.fetchList();
+    },
+  },
+});
+```
+
+### `$status` 响应式状态
+
+`$status` 是响应式对象，可以直接在模板中使用：
+
+```html
+<template>
+  <div v-if="store.$status.active">
+    <!-- 页面激活时才渲染 -->
+  </div>
+</template>
 ```
 
 ## API
@@ -133,30 +204,71 @@ export default {
 | `options.getters` | `Object` | 计算属性，`this` 指向 store |
 | `options.actions` | `Object` | 方法，`this` 指向 store |
 | `options.watch` | `Object` | 声明式侦听，支持点路径 `'a.b.c'` |
+| `options.lifecycle` | `Object` | 页面生命周期钩子 |
+
+### `useStore(vm?)`
+
+调用 `definePageStore` 返回的函数。
+
+| 用法 | 行为 |
+|------|------|
+| `useStore()` | 获取/创建 store，手动管理生命周期（兼容 0.1.0） |
+| `useStore(this)` | 获取/创建 store，自动绑定生命周期 + 自动销毁 |
+
+### `lifecycle` 钩子
+
+| 钩子 | 触发时机 | `this` 指向 |
+|------|---------|------------|
+| `mount` | 组件 `mounted` | store |
+| `unmount` | 组件 `beforeDestroy`（`$destroy` 时触发） | store |
+| `activate` | 组件 `activated`（keep-alive 恢复） | store |
+| `deactivate` | 组件 `deactivated`（keep-alive 缓存） | store |
 
 ### Store 实例方法
 
 | 方法 | 说明 |
 |------|------|
 | `$patch(partial)` | 浅合并更新 state，接受对象或 `(state) => Object` 函数 |
-| `$subscribe(cb)` | 订阅 state 变化，返回取消函数 |
 | `$reset()` | 重置 state 到初始值 |
 | `$emit(event, payload?)` | 发射事件（仅当前 store 作用域） |
 | `$on(event, handler)` | 订阅事件，返回取消函数 |
 | `$off(event, handler?)` | 取消事件订阅（不传 handler 则取消该事件全部监听） |
 | `$destroy()` | 销毁 store，回收所有资源 |
+| `bindTo(vm)` | 手动绑定到组件实例（通常不需要，`useStore(this)` 内部调用） |
+
+### Store 实例属性
+
+| 属性 | 说明 |
+|------|------|
+| `$id` | store 唯一标识 |
+| `$state` | 原始响应式 state 对象 |
+| `$status` | 响应式对象 `{ mounted: boolean, active: boolean }` |
+
+## 从 0.1.0 升级
 
-### `storeToRefs(store)`
+**零破坏性变更**。0.1.0 的代码不改一行也能跑。
 
-将 store 的 state 属性转为可解构的 refs 对象。
+区别只在于你现在可以把：
 
 ```javascript
-import { storeToRefs } from 'vue-page-store';
+created() {
+  this.store = useSomeStore();
+},
+beforeDestroy() {
+  this.store.$destroy();
+}
+```
 
-const store = useFunnelStore();
-const { filters, loading } = storeToRefs(store);
+简化成：
+
+```javascript
+created() {
+  this.store = useSomeStore(this);
+}
 ```
 
+> `storeToRefs` 和 `$subscribe` 在 0.2.0 中移除——实际项目中无使用场景，精简 API。
+
 ## 与 Pinia / Vuex 的关系
 
 这不是 Pinia 或 Vuex 的替代品，而是补充：
@@ -164,7 +276,7 @@ const { filters, loading } = storeToRefs(store);
 | | Vuex | Pinia | vue-page-store |
 |---|---|---|---|
 | 作用域 | 全局 | 全局 | 页面级 |
-| 生命周期 | 应用级 | 应用级 | 页面级（手动 $destroy） |
+| 生命周期 | 应用级 | 应用级 | 页面级（自动绑定） |
 | 事件通信 | 无 | 无 | 内置 $emit/$on |
 | Vue 2.6 支持 | ✅ | ⚠️ 需 @vue/composition-api | ✅ 原生支持 |
 | 适用场景 | 用户信息、权限、全局配置 | 同 Vuex | 复杂页面内部状态 |
@@ -177,4 +289,4 @@ const { filters, loading } = storeToRefs(store);
 
 ## License
 
-[MIT](./LICENSE)
+[MIT](./LICENSE)

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * vue-page-store v0.1.0
+ * vue-page-store v0.2.1
  * (c) 2026 weijianjun
  * @license MIT
  */
@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * vue-page-store - Vue 2.6 页面级 Store
+ * vue-page-store 0.2.0 — Vue 2.6 页面级 Store
  *
  * 状态、通信、生命周期，一个作用域全收。
  *
@@ -22,16 +22,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
  */
 
 // Store 注册表（导出供调试 / devtools 使用）
-const storeRegistry = new Map();
+var storeRegistry = new Map();
 
 function createStoreInstance(Vue, id, options) {
-  const initialState = options.state();
-  const getters = options.getters || {};
-  const actions = options.actions || {};
+  var initialState = options.state();
+  var getters = options.getters || {};
+  var actions = options.actions || {};
+  var lifecycles = options.lifecycle || {};
 
   // --- 用一个隐藏的 Vue 实例承载响应式 state + computed getters ---
-  const computedDefs = {};
-  const store = { _disposed: false };
+  var computedDefs = {};
+  var store = { _disposed: false };
 
   Object.keys(getters).forEach(function (key) {
     computedDefs[key] = function () {
@@ -39,14 +40,21 @@ function createStoreInstance(Vue, id, options) {
     };
   });
 
-  const vm = new Vue({
+  var vm = new Vue({
     data: function () {
-      return { $$state: initialState };
+      return {
+        $$state: initialState,
+        $$status: {
+          mounted: false,
+          active: false
+        }
+      };
     },
     computed: computedDefs,
   });
 
-  const rawState = vm.$data.$$state;
+  var rawState = vm.$data.$$state;
+  var rawStatus = vm.$data.$$status;
 
   // ====== state —— 代理到 vm.$$state ======
   Object.keys(initialState).forEach(function (key) {
@@ -71,14 +79,14 @@ function createStoreInstance(Vue, id, options) {
   });
 
   // ====== watch —— 声明式副作用，生命周期自动回收 ======
-  const watches = options.watch || {};
+  var 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 };
+    var path = _ref[0];
+    var def = _ref[1];
+    var handler = typeof def === 'function' ? def : def.handler;
+    var watchOpts = { deep: true };
     if (typeof def === 'object' && def.immediate) watchOpts.immediate = true;
-    const expr = function () {
+    var expr = function () {
       return path.split('.').reduce(function (obj, k) { return obj && obj[k]; }, store);
     };
     vm.$watch(expr, handler.bind(store), watchOpts);
@@ -86,6 +94,7 @@ function createStoreInstance(Vue, id, options) {
 
   // ====== 内置方法 ======
   store.$state = rawState;
+  store.$status = rawStatus;
   store.$id = id;
 
   /**
@@ -93,37 +102,24 @@ function createStoreInstance(Vue, id, options) {
    * @param {Object|Function} partial - 要合并的对象，或 (state) => Object 函数
    */
   store.$patch = function (partial) {
-    const obj = typeof partial === 'function' ? partial(rawState) : partial;
+    var 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();
+    var fresh = options.state();
     Object.keys(fresh).forEach(function (key) {
       rawState[key] = fresh[key];
     });
   };
 
   // ====== 内置事件总线（页面作用域隔离通信） ======
-  const _listeners = {};
+  var _listeners = {};
 
   /**
    * 发射事件（仅当前 store 作用域内）
@@ -131,7 +127,7 @@ function createStoreInstance(Vue, id, options) {
    * @param {*} payload - 事件数据
    */
   store.$emit = function (event, payload) {
-    const fns = _listeners[event];
+    var fns = _listeners[event];
     if (fns) fns.slice().forEach(function (fn) { fn(payload); });
   };
 
@@ -145,7 +141,7 @@ function createStoreInstance(Vue, id, options) {
     if (!_listeners[event]) _listeners[event] = [];
     _listeners[event].push(handler);
     return function () {
-      const idx = _listeners[event].indexOf(handler);
+      var idx = _listeners[event].indexOf(handler);
       if (idx > -1) _listeners[event].splice(idx, 1);
     };
   };
@@ -158,17 +154,77 @@ function createStoreInstance(Vue, id, options) {
   store.$off = function (event, handler) {
     if (!_listeners[event]) return;
     if (handler) {
-      const idx = _listeners[event].indexOf(handler);
+      var idx = _listeners[event].indexOf(handler);
       if (idx > -1) _listeners[event].splice(idx, 1);
     } else {
       delete _listeners[event];
     }
   };
 
+  // ====== 页面生命周期 ======
+
+  /** 触发生命周期钩子 + 广播事件 */
+  function runHook(name, payload) {
+    var hook = lifecycles[name];
+    if (typeof hook === 'function') {
+      hook.call(store, payload);
+    }
+    store.$emit('page:' + name, payload);
+  }
+
   /**
-   * 销毁 store —— 清空事件、销毁 vm、移除注册
+   * 绑定到组件实例，自动挂载生命周期
+   *
+   * 原理：Vue 2 的 vm.$on('hook:xxx') 可监听组件自身生命周期事件，
+   * 这是 Vue 2 内置能力，不是 hack。
+   *
+   * 时序保证：
+   *   无 keep-alive → mounted → beforeDestroy
+   *   有 keep-alive → mounted → activated ⇄ deactivated → beforeDestroy
+   *
+   * 必须在 created 中调用（mounted 之前），否则 hook:mounted 捕获不到。
+   *
+   * @param {Vue} componentVm - 组件实例（通常传 this）
+   * @returns {Object} store - 支持链式调用
+   */
+  store.bindTo = function (componentVm) {
+    if (store._disposed) return store;
+
+    componentVm.$on('hook:mounted', function () {
+      rawStatus.mounted = true;
+      rawStatus.active = true;
+      runHook('mount');
+    });
+
+    componentVm.$on('hook:activated', function () {
+      rawStatus.active = true;
+      runHook('activate');
+    });
+
+    componentVm.$on('hook:deactivated', function () {
+      rawStatus.active = false;
+      runHook('deactivate');
+    });
+
+    componentVm.$on('hook:beforeDestroy', function () {
+      store.$destroy();
+    });
+
+    return store;
+  };
+
+  // ====== $destroy ======
+
+  /**
+   * 销毁 store —— 触发 unmount 钩子、清空事件、销毁 vm、移除注册
    */
   store.$destroy = function () {
+    if (store._disposed) return;
+
+    rawStatus.mounted = false;
+    rawStatus.active = false;
+    runHook('unmount');
+
     store._disposed = true;
     Object.keys(_listeners).forEach(function (key) { delete _listeners[key]; });
     vm.$destroy();
@@ -184,41 +240,47 @@ function createStoreInstance(Vue, id, options) {
  * 定义页面级 Store
  *
  * @param {string} id - 唯一标识
- * @param {Object} options - { state, getters, actions, watch }
- * @returns {Function} useStore - 调用即获取 / 创建 store 实例
+ * @param {Object} options - { state, getters, actions, watch, lifecycle }
+ * @returns {Function} useStore(vm?) - 调用即获取 / 创建 store 实例
  *
  * @example
- * const useFunnelStore = definePageStore('funnelDetail', {
- *   state: () => ({ filters: {}, loading: false }),
+ * var useFunnelStore = definePageStore('funnelDetail', {
+ *   state: function () { return { filters: {}, loading: false }; },
  *   getters: {
- *     isReady() { return !this.loading; }
+ *     isReady: function () { return !this.loading; }
  *   },
  *   actions: {
- *     async fetchData() { ... }
+ *     fetchData: async function () { ... }
+ *   },
+ *   lifecycle: {
+ *     mount:    function () { this.fetchData(); },
+ *     unmount:  function () { console.log('bye'); },
+ *     activate: function () { this.needRefresh && this.fetchData(); }
  *   }
  * });
  *
- * // 组件中
- * const store = useFunnelStore();
- * store.fetchData();
+ * // 组件中（created 里传 this，自动绑定全部生命周期 + 自动销毁）
+ * created() {
+ *   this.store = useFunnelStore(this);
+ * }
  *
- * // 页面销毁时
- * store.$destroy();
+ * // 不需要 lifecycle 时，不传参数，和 0.1.0 完全一样
+ * this.store = useFunnelStore();
  */
 function definePageStore(id, options) {
   if (!id || typeof options.state !== 'function') {
     throw new Error('[vue-page-store] 需要 id 和 state 函数');
   }
 
-  // 缓存 Vue 引用，首次调用时从 store 的 vm 实例获取
-  let _Vue = null;
+  var _Vue = null;
 
-  return function useStore() {
+  return function useStore(componentVm) {
     if (storeRegistry.has(id)) {
-      return storeRegistry.get(id);
+      var existing = storeRegistry.get(id);
+      if (componentVm) existing.bindTo(componentVm);
+      return existing;
     }
 
-    // 自动获取 Vue 构造函数
     if (!_Vue) {
       try {
         _Vue = require('vue');
@@ -230,35 +292,14 @@ function definePageStore(id, options) {
       }
     }
 
-    const store = createStoreInstance(_Vue, id, options);
+    var store = createStoreInstance(_Vue, id, options);
     storeRegistry.set(id, store);
+    if (componentVm) store.bindTo(componentVm);
     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 };
+var index = { definePageStore, storeRegistry };
 
 exports.default = index;
 exports.definePageStore = definePageStore;
 exports.storeRegistry = storeRegistry;
-exports.storeToRefs = storeToRefs;

package/dist/index.esm.js

@@ -1,10 +1,10 @@
 /*!
- * vue-page-store v0.1.0
+ * vue-page-store v0.2.1
  * (c) 2026 weijianjun
  * @license MIT
  */
 /**
- * vue-page-store - Vue 2.6 页面级 Store
+ * vue-page-store 0.2.0 — Vue 2.6 页面级 Store
  *
  * 状态、通信、生命周期，一个作用域全收。
  *
@@ -18,16 +18,17 @@
  */
 
 // Store 注册表（导出供调试 / devtools 使用）
-const storeRegistry = new Map();
+var storeRegistry = new Map();
 
 function createStoreInstance(Vue, id, options) {
-  const initialState = options.state();
-  const getters = options.getters || {};
-  const actions = options.actions || {};
+  var initialState = options.state();
+  var getters = options.getters || {};
+  var actions = options.actions || {};
+  var lifecycles = options.lifecycle || {};
 
   // --- 用一个隐藏的 Vue 实例承载响应式 state + computed getters ---
-  const computedDefs = {};
-  const store = { _disposed: false };
+  var computedDefs = {};
+  var store = { _disposed: false };
 
   Object.keys(getters).forEach(function (key) {
     computedDefs[key] = function () {
@@ -35,14 +36,21 @@ function createStoreInstance(Vue, id, options) {
     };
   });
 
-  const vm = new Vue({
+  var vm = new Vue({
     data: function () {
-      return { $$state: initialState };
+      return {
+        $$state: initialState,
+        $$status: {
+          mounted: false,
+          active: false
+        }
+      };
     },
     computed: computedDefs,
   });
 
-  const rawState = vm.$data.$$state;
+  var rawState = vm.$data.$$state;
+  var rawStatus = vm.$data.$$status;
 
   // ====== state —— 代理到 vm.$$state ======
   Object.keys(initialState).forEach(function (key) {
@@ -67,14 +75,14 @@ function createStoreInstance(Vue, id, options) {
   });
 
   // ====== watch —— 声明式副作用，生命周期自动回收 ======
-  const watches = options.watch || {};
+  var 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 };
+    var path = _ref[0];
+    var def = _ref[1];
+    var handler = typeof def === 'function' ? def : def.handler;
+    var watchOpts = { deep: true };
     if (typeof def === 'object' && def.immediate) watchOpts.immediate = true;
-    const expr = function () {
+    var expr = function () {
       return path.split('.').reduce(function (obj, k) { return obj && obj[k]; }, store);
     };
     vm.$watch(expr, handler.bind(store), watchOpts);
@@ -82,6 +90,7 @@ function createStoreInstance(Vue, id, options) {
 
   // ====== 内置方法 ======
   store.$state = rawState;
+  store.$status = rawStatus;
   store.$id = id;
 
   /**
@@ -89,37 +98,24 @@ function createStoreInstance(Vue, id, options) {
    * @param {Object|Function} partial - 要合并的对象，或 (state) => Object 函数
    */
   store.$patch = function (partial) {
-    const obj = typeof partial === 'function' ? partial(rawState) : partial;
+    var 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();
+    var fresh = options.state();
     Object.keys(fresh).forEach(function (key) {
       rawState[key] = fresh[key];
     });
   };
 
   // ====== 内置事件总线（页面作用域隔离通信） ======
-  const _listeners = {};
+  var _listeners = {};
 
   /**
    * 发射事件（仅当前 store 作用域内）
@@ -127,7 +123,7 @@ function createStoreInstance(Vue, id, options) {
    * @param {*} payload - 事件数据
    */
   store.$emit = function (event, payload) {
-    const fns = _listeners[event];
+    var fns = _listeners[event];
     if (fns) fns.slice().forEach(function (fn) { fn(payload); });
   };
 
@@ -141,7 +137,7 @@ function createStoreInstance(Vue, id, options) {
     if (!_listeners[event]) _listeners[event] = [];
     _listeners[event].push(handler);
     return function () {
-      const idx = _listeners[event].indexOf(handler);
+      var idx = _listeners[event].indexOf(handler);
       if (idx > -1) _listeners[event].splice(idx, 1);
     };
   };
@@ -154,17 +150,77 @@ function createStoreInstance(Vue, id, options) {
   store.$off = function (event, handler) {
     if (!_listeners[event]) return;
     if (handler) {
-      const idx = _listeners[event].indexOf(handler);
+      var idx = _listeners[event].indexOf(handler);
       if (idx > -1) _listeners[event].splice(idx, 1);
     } else {
       delete _listeners[event];
     }
   };
 
+  // ====== 页面生命周期 ======
+
+  /** 触发生命周期钩子 + 广播事件 */
+  function runHook(name, payload) {
+    var hook = lifecycles[name];
+    if (typeof hook === 'function') {
+      hook.call(store, payload);
+    }
+    store.$emit('page:' + name, payload);
+  }
+
   /**
-   * 销毁 store —— 清空事件、销毁 vm、移除注册
+   * 绑定到组件实例，自动挂载生命周期
+   *
+   * 原理：Vue 2 的 vm.$on('hook:xxx') 可监听组件自身生命周期事件，
+   * 这是 Vue 2 内置能力，不是 hack。
+   *
+   * 时序保证：
+   *   无 keep-alive → mounted → beforeDestroy
+   *   有 keep-alive → mounted → activated ⇄ deactivated → beforeDestroy
+   *
+   * 必须在 created 中调用（mounted 之前），否则 hook:mounted 捕获不到。
+   *
+   * @param {Vue} componentVm - 组件实例（通常传 this）
+   * @returns {Object} store - 支持链式调用
+   */
+  store.bindTo = function (componentVm) {
+    if (store._disposed) return store;
+
+    componentVm.$on('hook:mounted', function () {
+      rawStatus.mounted = true;
+      rawStatus.active = true;
+      runHook('mount');
+    });
+
+    componentVm.$on('hook:activated', function () {
+      rawStatus.active = true;
+      runHook('activate');
+    });
+
+    componentVm.$on('hook:deactivated', function () {
+      rawStatus.active = false;
+      runHook('deactivate');
+    });
+
+    componentVm.$on('hook:beforeDestroy', function () {
+      store.$destroy();
+    });
+
+    return store;
+  };
+
+  // ====== $destroy ======
+
+  /**
+   * 销毁 store —— 触发 unmount 钩子、清空事件、销毁 vm、移除注册
    */
   store.$destroy = function () {
+    if (store._disposed) return;
+
+    rawStatus.mounted = false;
+    rawStatus.active = false;
+    runHook('unmount');
+
     store._disposed = true;
     Object.keys(_listeners).forEach(function (key) { delete _listeners[key]; });
     vm.$destroy();
@@ -180,41 +236,47 @@ function createStoreInstance(Vue, id, options) {
  * 定义页面级 Store
  *
  * @param {string} id - 唯一标识
- * @param {Object} options - { state, getters, actions, watch }
- * @returns {Function} useStore - 调用即获取 / 创建 store 实例
+ * @param {Object} options - { state, getters, actions, watch, lifecycle }
+ * @returns {Function} useStore(vm?) - 调用即获取 / 创建 store 实例
  *
  * @example
- * const useFunnelStore = definePageStore('funnelDetail', {
- *   state: () => ({ filters: {}, loading: false }),
+ * var useFunnelStore = definePageStore('funnelDetail', {
+ *   state: function () { return { filters: {}, loading: false }; },
  *   getters: {
- *     isReady() { return !this.loading; }
+ *     isReady: function () { return !this.loading; }
  *   },
  *   actions: {
- *     async fetchData() { ... }
+ *     fetchData: async function () { ... }
+ *   },
+ *   lifecycle: {
+ *     mount:    function () { this.fetchData(); },
+ *     unmount:  function () { console.log('bye'); },
+ *     activate: function () { this.needRefresh && this.fetchData(); }
  *   }
  * });
  *
- * // 组件中
- * const store = useFunnelStore();
- * store.fetchData();
+ * // 组件中（created 里传 this，自动绑定全部生命周期 + 自动销毁）
+ * created() {
+ *   this.store = useFunnelStore(this);
+ * }
  *
- * // 页面销毁时
- * store.$destroy();
+ * // 不需要 lifecycle 时，不传参数，和 0.1.0 完全一样
+ * this.store = useFunnelStore();
  */
 function definePageStore(id, options) {
   if (!id || typeof options.state !== 'function') {
     throw new Error('[vue-page-store] 需要 id 和 state 函数');
   }
 
-  // 缓存 Vue 引用，首次调用时从 store 的 vm 实例获取
-  let _Vue = null;
+  var _Vue = null;
 
-  return function useStore() {
+  return function useStore(componentVm) {
     if (storeRegistry.has(id)) {
-      return storeRegistry.get(id);
+      var existing = storeRegistry.get(id);
+      if (componentVm) existing.bindTo(componentVm);
+      return existing;
     }
 
-    // 自动获取 Vue 构造函数
     if (!_Vue) {
       try {
         _Vue = require('vue');
@@ -226,32 +288,12 @@ function definePageStore(id, options) {
       }
     }
 
-    const store = createStoreInstance(_Vue, id, options);
+    var store = createStoreInstance(_Vue, id, options);
     storeRegistry.set(id, store);
+    if (componentVm) store.bindTo(componentVm);
     return store;
   };
 }
+var index = { definePageStore, storeRegistry };
 
-/**
- * 将 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 };
+export { index as default, definePageStore, storeRegistry };

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * vue-page-store v0.1.0
+ * vue-page-store v0.2.1
  * (c) 2026 weijianjun
  * @license MIT
  */
@@ -10,7 +10,7 @@
 })(this, (function (exports) { 'use strict';
 
   /**
-   * vue-page-store - Vue 2.6 页面级 Store
+   * vue-page-store 0.2.0 — Vue 2.6 页面级 Store
    *
    * 状态、通信、生命周期，一个作用域全收。
    *
@@ -24,16 +24,17 @@
    */
 
   // Store 注册表（导出供调试 / devtools 使用）
-  const storeRegistry = new Map();
+  var storeRegistry = new Map();
 
   function createStoreInstance(Vue, id, options) {
-    const initialState = options.state();
-    const getters = options.getters || {};
-    const actions = options.actions || {};
+    var initialState = options.state();
+    var getters = options.getters || {};
+    var actions = options.actions || {};
+    var lifecycles = options.lifecycle || {};
 
     // --- 用一个隐藏的 Vue 实例承载响应式 state + computed getters ---
-    const computedDefs = {};
-    const store = { _disposed: false };
+    var computedDefs = {};
+    var store = { _disposed: false };
 
     Object.keys(getters).forEach(function (key) {
       computedDefs[key] = function () {
@@ -41,14 +42,21 @@
       };
     });
 
-    const vm = new Vue({
+    var vm = new Vue({
       data: function () {
-        return { $$state: initialState };
+        return {
+          $$state: initialState,
+          $$status: {
+            mounted: false,
+            active: false
+          }
+        };
       },
       computed: computedDefs,
     });
 
-    const rawState = vm.$data.$$state;
+    var rawState = vm.$data.$$state;
+    var rawStatus = vm.$data.$$status;
 
     // ====== state —— 代理到 vm.$$state ======
     Object.keys(initialState).forEach(function (key) {
@@ -73,14 +81,14 @@
     });
 
     // ====== watch —— 声明式副作用，生命周期自动回收 ======
-    const watches = options.watch || {};
+    var 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 };
+      var path = _ref[0];
+      var def = _ref[1];
+      var handler = typeof def === 'function' ? def : def.handler;
+      var watchOpts = { deep: true };
       if (typeof def === 'object' && def.immediate) watchOpts.immediate = true;
-      const expr = function () {
+      var expr = function () {
         return path.split('.').reduce(function (obj, k) { return obj && obj[k]; }, store);
       };
       vm.$watch(expr, handler.bind(store), watchOpts);
@@ -88,6 +96,7 @@
 
     // ====== 内置方法 ======
     store.$state = rawState;
+    store.$status = rawStatus;
     store.$id = id;
 
     /**
@@ -95,37 +104,24 @@
      * @param {Object|Function} partial - 要合并的对象，或 (state) => Object 函数
      */
     store.$patch = function (partial) {
-      const obj = typeof partial === 'function' ? partial(rawState) : partial;
+      var 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();
+      var fresh = options.state();
       Object.keys(fresh).forEach(function (key) {
         rawState[key] = fresh[key];
       });
     };
 
     // ====== 内置事件总线（页面作用域隔离通信） ======
-    const _listeners = {};
+    var _listeners = {};
 
     /**
      * 发射事件（仅当前 store 作用域内）
@@ -133,7 +129,7 @@
      * @param {*} payload - 事件数据
      */
     store.$emit = function (event, payload) {
-      const fns = _listeners[event];
+      var fns = _listeners[event];
       if (fns) fns.slice().forEach(function (fn) { fn(payload); });
     };
 
@@ -147,7 +143,7 @@
       if (!_listeners[event]) _listeners[event] = [];
       _listeners[event].push(handler);
       return function () {
-        const idx = _listeners[event].indexOf(handler);
+        var idx = _listeners[event].indexOf(handler);
         if (idx > -1) _listeners[event].splice(idx, 1);
       };
     };
@@ -160,17 +156,77 @@
     store.$off = function (event, handler) {
       if (!_listeners[event]) return;
       if (handler) {
-        const idx = _listeners[event].indexOf(handler);
+        var idx = _listeners[event].indexOf(handler);
         if (idx > -1) _listeners[event].splice(idx, 1);
       } else {
         delete _listeners[event];
       }
     };
 
+    // ====== 页面生命周期 ======
+
+    /** 触发生命周期钩子 + 广播事件 */
+    function runHook(name, payload) {
+      var hook = lifecycles[name];
+      if (typeof hook === 'function') {
+        hook.call(store, payload);
+      }
+      store.$emit('page:' + name, payload);
+    }
+
     /**
-     * 销毁 store —— 清空事件、销毁 vm、移除注册
+     * 绑定到组件实例，自动挂载生命周期
+     *
+     * 原理：Vue 2 的 vm.$on('hook:xxx') 可监听组件自身生命周期事件，
+     * 这是 Vue 2 内置能力，不是 hack。
+     *
+     * 时序保证：
+     *   无 keep-alive → mounted → beforeDestroy
+     *   有 keep-alive → mounted → activated ⇄ deactivated → beforeDestroy
+     *
+     * 必须在 created 中调用（mounted 之前），否则 hook:mounted 捕获不到。
+     *
+     * @param {Vue} componentVm - 组件实例（通常传 this）
+     * @returns {Object} store - 支持链式调用
+     */
+    store.bindTo = function (componentVm) {
+      if (store._disposed) return store;
+
+      componentVm.$on('hook:mounted', function () {
+        rawStatus.mounted = true;
+        rawStatus.active = true;
+        runHook('mount');
+      });
+
+      componentVm.$on('hook:activated', function () {
+        rawStatus.active = true;
+        runHook('activate');
+      });
+
+      componentVm.$on('hook:deactivated', function () {
+        rawStatus.active = false;
+        runHook('deactivate');
+      });
+
+      componentVm.$on('hook:beforeDestroy', function () {
+        store.$destroy();
+      });
+
+      return store;
+    };
+
+    // ====== $destroy ======
+
+    /**
+     * 销毁 store —— 触发 unmount 钩子、清空事件、销毁 vm、移除注册
      */
     store.$destroy = function () {
+      if (store._disposed) return;
+
+      rawStatus.mounted = false;
+      rawStatus.active = false;
+      runHook('unmount');
+
       store._disposed = true;
       Object.keys(_listeners).forEach(function (key) { delete _listeners[key]; });
       vm.$destroy();
@@ -186,41 +242,47 @@
    * 定义页面级 Store
    *
    * @param {string} id - 唯一标识
-   * @param {Object} options - { state, getters, actions, watch }
-   * @returns {Function} useStore - 调用即获取 / 创建 store 实例
+   * @param {Object} options - { state, getters, actions, watch, lifecycle }
+   * @returns {Function} useStore(vm?) - 调用即获取 / 创建 store 实例
    *
    * @example
-   * const useFunnelStore = definePageStore('funnelDetail', {
-   *   state: () => ({ filters: {}, loading: false }),
+   * var useFunnelStore = definePageStore('funnelDetail', {
+   *   state: function () { return { filters: {}, loading: false }; },
    *   getters: {
-   *     isReady() { return !this.loading; }
+   *     isReady: function () { return !this.loading; }
    *   },
    *   actions: {
-   *     async fetchData() { ... }
+   *     fetchData: async function () { ... }
+   *   },
+   *   lifecycle: {
+   *     mount:    function () { this.fetchData(); },
+   *     unmount:  function () { console.log('bye'); },
+   *     activate: function () { this.needRefresh && this.fetchData(); }
    *   }
    * });
    *
-   * // 组件中
-   * const store = useFunnelStore();
-   * store.fetchData();
+   * // 组件中（created 里传 this，自动绑定全部生命周期 + 自动销毁）
+   * created() {
+   *   this.store = useFunnelStore(this);
+   * }
    *
-   * // 页面销毁时
-   * store.$destroy();
+   * // 不需要 lifecycle 时，不传参数，和 0.1.0 完全一样
+   * this.store = useFunnelStore();
    */
   function definePageStore(id, options) {
     if (!id || typeof options.state !== 'function') {
       throw new Error('[vue-page-store] 需要 id 和 state 函数');
     }
 
-    // 缓存 Vue 引用，首次调用时从 store 的 vm 实例获取
-    let _Vue = null;
+    var _Vue = null;
 
-    return function useStore() {
+    return function useStore(componentVm) {
       if (storeRegistry.has(id)) {
-        return storeRegistry.get(id);
+        var existing = storeRegistry.get(id);
+        if (componentVm) existing.bindTo(componentVm);
+        return existing;
       }
 
-      // 自动获取 Vue 构造函数
       if (!_Vue) {
         try {
           _Vue = require('vue');
@@ -232,38 +294,17 @@
         }
       }
 
-      const store = createStoreInstance(_Vue, id, options);
+      var store = createStoreInstance(_Vue, id, options);
       storeRegistry.set(id, store);
+      if (componentVm) store.bindTo(componentVm);
       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 };
+  var index = { definePageStore, 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

@@ -1,11 +1,11 @@
 /*!
- * vue-page-store v0.1.0
+ * vue-page-store v0.2.1
  * (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
+   * vue-page-store 0.2.0 — Vue 2.6 页面级 Store
    *
    * 状态、通信、生命周期，一个作用域全收。
    *
@@ -16,4 +16,4 @@
    *
    * @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})});
+   */var t=new Map;function n(e,n){if(!e||"function"!=typeof n.state)throw new Error("[vue-page-store] 需要 id 和 state 函数");var o=null;return function(i){if(t.has(e)){var r=t.get(e);return i&&r.bindTo(i),r}if(!o)try{(o=require("vue")).default&&(o=o.default)}catch(e){throw new Error("[vue-page-store] 无法自动获取 Vue，请确保 vue 已安装")}var c=function(e,n,o){var i=o.state(),r=o.getters||{},c=o.actions||{},u=o.lifecycle||{},f={},a={_disposed:!1};Object.keys(r).forEach(function(e){f[e]=function(){return r[e].call(a)}});var s=new e({data:function(){return{$$state:i,$$status:{mounted:!1,active:!1}}},computed:f}),d=s.$data.$$state,v=s.$data.$$status;Object.keys(i).forEach(function(e){Object.defineProperty(a,e,{enumerable:!0,get:function(){return d[e]},set:function(t){d[e]=t}})}),Object.keys(r).forEach(function(e){Object.defineProperty(a,e,{enumerable:!0,get:function(){return s[e]}})}),Object.keys(c).forEach(function(e){a[e]=c[e].bind(a)});var l=o.watch||{};Object.entries(l).forEach(function(e){var t=e[0],n=e[1],o="function"==typeof n?n:n.handler,i={deep:!0};"object"==typeof n&&n.immediate&&(i.immediate=!0),s.$watch(function(){return t.split(".").reduce(function(e,t){return e&&e[t]},a)},o.bind(a),i)}),a.$state=d,a.$status=v,a.$id=n,a.$patch=function(t){var n="function"==typeof t?t(d):t;Object.keys(n).forEach(function(t){e.set(d,t,n[t])})},a.$reset=function(){var e=o.state();Object.keys(e).forEach(function(t){d[t]=e[t]})};var p={};function y(e,t){var n=u[e];"function"==typeof n&&n.call(a,t),a.$emit("page:"+e,t)}return a.$emit=function(e,t){var n=p[e];n&&n.slice().forEach(function(e){e(t)})},a.$on=function(e,t){return p[e]||(p[e]=[]),p[e].push(t),function(){var n=p[e].indexOf(t);n>-1&&p[e].splice(n,1)}},a.$off=function(e,t){if(p[e])if(t){var n=p[e].indexOf(t);n>-1&&p[e].splice(n,1)}else delete p[e]},a.bindTo=function(e){return a._disposed||(e.$on("hook:mounted",function(){v.mounted=!0,v.active=!0,y("mount")}),e.$on("hook:activated",function(){v.active=!0,y("activate")}),e.$on("hook:deactivated",function(){v.active=!1,y("deactivate")}),e.$on("hook:beforeDestroy",function(){a.$destroy()})),a},a.$destroy=function(){a._disposed||(v.mounted=!1,v.active=!1,y("unmount"),a._disposed=!0,Object.keys(p).forEach(function(e){delete p[e]}),s.$destroy(),t.delete(n))},a._vm=s,a}(o,e,n);return t.set(e,c),i&&c.bindTo(i),c}}var o={definePageStore:n,storeRegistry:t};e.default=o,e.definePageStore=n,e.storeRegistry=t,Object.defineProperty(e,"__esModule",{value:!0})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-page-store",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Vue 2.6 页面级 Store —— 状态、通信、生命周期，一个作用域全收",
   "author": "weijianjun",
   "license": "MIT",