如何在Storybook Story中访问Vue3应用实例并配置全局属性？

你可以通过以下两种方式访问Storybook内部的Vue应用实例完成globalProperties配置：

方法1：全局配置所有故事 #

如果所有故事都需要用到该全局属性，直接在.storybook/preview.js中添加setup配置即可，该函数会接收到Storybook初始化完成的Vue应用实例作为入参：

// .storybook/preview.js
import { Icons } from '你的图标文件路径'

export const setup = (app) => {
  // 此处app和业务代码中createApp返回的实例完全一致，可直接操作config
  app.config.globalProperties.Icons = Icons
}

除了配置全局属性，你也可以在该方法中完成全局组件注册、插件安装等通用初始化操作。

方法2：针对单个故事集/单个故事配置 #

如果仅部分组件需要用到该全局属性，不需要全局生效，可以直接在对应的故事文件中通过vueapp参数配置：

// 组件对应的.stories.js文件
import YourComponent from './YourComponent.vue'
import { Icons } from '你的图标文件路径'

export default {
  title: '组件/YourComponent',
  component: YourComponent,
  // 对当前故事集下的所有故事生效
  parameters: {
    vueapp: (app) => {
      app.config.globalProperties.Icons = Icons
    }
  }
}

// 如果仅需要对单个故事生效，单独配置在对应故事的parameters中即可
export const 基础用法 = {
  parameters: {
    vueapp: (app) => {
      app.config.globalProperties.Icons = Icons
    }
  },
  render: () => ({
    components: { YourComponent },
    template: '<YourComponent />'
  })
}

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