Vue3 Pinia Store 生命周期管理

在 Vue 3 的 Pinia 中，defineStore 定义的 store 本身没有 onUnmounted 生命周期钩子。但你可以通过以下方式实现类似效果，具体执行机制如下：

---

1. 在组件中使用 onUnmounted

Pinia store 是独立于组件的，其生命周期不与组件绑定。推荐在组件中使用 onUnmounted 清理 store 相关逻辑：

vue

复制

下载

---

2. 在 Store 中模拟卸载逻辑

通过 $onAction 或自定义方法监听组件的卸载行为（需要组件主动触发）：

ts

复制

下载

// store.js
import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  actions: {
    registerComponent() {
      // 模拟注册逻辑
      console.log('组件注册');
      return () => { console.log('执行清理') }; // 返回清理函数
    }
  }
});

vue

复制

下载

---

3. Store 的自动销毁机制

• 默认行为：Pinia store 是单例的，除非所有引用它的组件都卸载且没有其他引用，才会被垃圾回收。

• 手动销毁：调用 store.$dispose() 可主动销毁 store（重置状态、移除所有订阅）：

  ts

  复制

  下载

  // 在组件中
  onUnmounted(() => {
    store.$dispose(); // 销毁 store 实例
  });

  调用后，该 store 实例的状态和订阅会被清除，下次调用 useMyStore() 会创建新实例。

---

执行机制总结

场景	执行方式	适用情况
组件卸载时清理订阅	在组件 onUnmounted 中调用 unsubscribe() 或 store.$dispose()	清理事件监听、定时器等
主动销毁 store 实例	调用 store.$dispose() 重置状态并移除所有订阅	组件完全不再需要该 store 时
Store 全局单例	默认所有组件共享同一实例，无显式销毁时一直存在	多数场景

---

最佳实践

1. 优先在组件中清理：在 onUnmounted 中取消订阅（如 $subscribe、$onAction 返回的函数）。

2. 避免直接操作 DOM：Store 应保持与 DOM 无关，清理逻辑交给组件。

3. 谨慎使用 $dispose：仅在确定该 store 实例完全不再需要时使用（如路由切换后组件完全销毁）。

关键点：Pinia store 本身无生命周期钩子，其存活时间由引用它的组件和手动管理决定。清理逻辑需开发者显式处理。