当前位置：首页 > web >正文

Vue3 Pinia Store 生命周期管理

web 2025/6/17 22:23:02

在 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 或自定义方法监听组件的卸载行为（需要组件主动触发）：

复制

下载

// 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() 会创建新实例。

执行机制总结

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