storybook [Bug]: 在vue中,UseGlobal不可用,

camsedfj  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(119)

描述bug

我试图实时获取全局值,所以当全局配置(例如主题)发生变化时,我可以在不重新加载的情况下更改主题。我找到了这篇文章并尝试使用useGlobal,因为在装饰器中,上下文参数不是响应式的。https://storybook.js.org/docs/vue/essentials/toolbars-and-globals

重现问题

// .storybook/withVeutifyTheme.decorator.js
import { watch, toRef, isReactive } from "vue";
import { DecoratorFunction } from "@storybook/types";
import { VueRenderer } from "@storybook/vue3";
import { useTheme, useLocale } from "vuetify";
import { VThemeProvider } from "vuetify/components";

export const DEFAULT_THEME = "light";
export const DEFAULT_LOCALE = "ja";

export const withVuetifyTheme: DecoratorFunction<
  VueRenderer,
  { [x: string]: any }
> = (story, context) => {
  const globalTheme = context.globals.theme || DEFAULT_THEME;
  const locale = context.globals.locale || DEFAULT_LOCALE;

  return {
    components: { VThemeProvider, story },
    setup() {
      const theme = useTheme();
      const { current: currentLocale } = useLocale();
      const { globals } = context.getStoryContext(story);
      console.log();
      theme.global.name.value = globalTheme;
      currentLocale.value = locale;
      return {
        theme,
      };
    },
    template: `<v-theme-provider>
<story />
</v-theme-provider>`,
  };
};

我创建了一个带有这个装饰器的函数。

系统环境

https://storybook.js.org/docs/vue/essentials/toolbars-and-globals

其他上下文信息

  • 无响应*

相关问题