Vue3 Pinia Store 生命周期管理

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

1. 在组件中使用 onUnmounted

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

vue

复制

下载

<script setup>
import { useMyStore } from './store';
import { onUnmounted } from 'vue';

const store = useMyStore();

// 订阅状态变化（示例）
const unsubscribe = store.$subscribe((mutation, state) => {
  console.log('状态变化', state);
});

// 组件卸载时清理
onUnmounted(() => {
  unsubscribe(); // 取消订阅
  store.$dispose?.(); // 手动调用 dispose 方法（如果存在）
});
</script>

2. 在 Store 中模拟卸载逻辑

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

ts

复制

下载

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

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

vue

复制

下载

<!-- 组件中 -->
<script setup>
import { useMyStore } from './store';
import { onUnmounted } from 'vue';

const store = useMyStore();
const cleanup = store.registerComponent();

onUnmounted(() => {
  cleanup(); // 手动触发清理
});
</script>

3. Store 的自动销毁机制

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

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

  ts

  复制

  下载

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

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

执行机制总结

最佳实践

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

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

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

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