描述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
其他上下文信息
- 无响应*
1条答案
按热度按时间fkaflof61#
我正在使用Storybook 7.0.22。