如何在Storybook切换故事前执行类似销毁函数的逻辑？

完全可以实现，不需要发布插件，以下是几种适合个人项目的方案：

方案一：利用框架自身的生命周期钩子（针对单个故事） #

直接在故事组件中使用对应框架的卸载钩子，切换到其他故事时，当前故事组件会被卸载，钩子自动触发：

React项目示例 #

import { useEffect } from 'react';
import MyComponent from './MyComponent';

export default {
  title: 'Components/MyComponent',
};

export const Default = () => {
  useEffect(() => {
    // 可选：组件挂载时的初始化逻辑
    return () => {
      // 切换故事时执行清理，等效于ngOnDestroy/unmounted
      console.log('执行清理：取消订阅、清除定时器等');
      // 示例：清除全局定时器
      if (window.myTimer) {
        clearInterval(window.myTimer);
        window.myTimer = null;
      }
    };
  }, []);

  return <MyComponent />;
};

Vue项目示例 #

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

onUnmounted(() => {
  // 切换故事时执行清理
  console.log('Vue组件卸载，执行清理操作');
  // 示例：重置全局状态
  window.globalState = {};
});
</script>

<template>
  <MyComponent />
</template>

方案二：全局层面的统一清理（所有故事切换时触发） #

在.storybook/preview.js中通过Storybook的事件通道监听故事切换，执行全局统一的清理逻辑：

import { addons } from '@storybook/addons';
import { STORY_CHANGED } from '@storybook/core-events';

// 获取Storybook的事件通道
const channel = addons.getChannel();

// 监听故事切换事件
channel.on(STORY_CHANGED, (targetStoryId) => {
  console.log(`切换到故事${targetStoryId}，执行全局清理`);
  // 全局清理逻辑示例：清除所有全局定时器、重置全局订阅等
  Object.keys(window).forEach(key => {
    if (key.includes('timer') || key.includes('subscription')) {
      clearInterval(window[key]);
      window[key] = null;
    }
  });
});

如果需要结合框架能力做更细粒度的全局清理，也可以在全局装饰器中使用框架钩子：

// .storybook/preview.js（React示例）
import { useEffect } from 'react';

export const decorators = [
  (Story) => {
    useEffect(() => {
      return () => {
        // 每个故事卸载时都会执行此清理
        console.log('全局装饰器中的清理逻辑');
      };
    }, []);
    return <Story />;
  },
];

这些方案都不需要开发或发布独立插件，直接在项目内部配置或编写故事代码即可实现需求。

内容的提问来源于stack exchange，提问作者master_beta