Vue 故事书 globalTypes 不重新渲染预览

Question

大家好，我目前正在将 Storybook-Vue 集成到我自己的模式库中。到目前为止，一切都像一个魅力。期待一件事，那就是在 preview.js 中添加一个 globalType，然后在装饰器中使用它。注册新的全局类型有效，我在工具栏中看到它但是当我更改所选值时它不会重新呈现预览。

我的第一个猜测是上下文不是可观察的对象，因此 Vue 永远不知道该对象何时实际获得更新。但我不确定如何更改它。

// preview.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n);

export const globalTypes = {
    locale: {
        name: 'Locale',
        description: 'Internationalization locale',
        defaultValue: 'en-US',
        toolbar: {
            icon: 'globe',
            items: [
                { value: 'de-DE', right: '', title: 'German' },
                { value: 'en-US', right: ' ', title: 'English' },
                { value: 'cs-CZ', right: '', title: 'Czech' },
                { value: 'zh-CN', right: '', title: 'Chinese' },
            ],
        },
    },
};

const localeSelect = (story, context) => {
    const wrapped = story(context)
    const locale = context.globals.locale
    return Vue.extend({
        components: { wrapped, BiToast },
        data () {
            return {
                locale
            }
        },
        watch: {
            locale: {
                deep: true,
                handler (val) {
                    this.$i18n.locale = val
                }
            }
        },
        template: `
                <div>
                    {{ locale }}
                    <wrapped/>
                </div>
            `
    })
}

export const decorators = [localeSelect]

Answer 1

终于成功了。我只需要使用 useGlobals 并在返回的对象之外设置 i18n。

import { useGlobals } from '@storybook/client-api';

const localeSelect = (story, context) => {
    const [{locale}] = useGlobals();
    i18n.locale = locale
    return Vue.extend({
    ...

Vue 故事书 globalTypes 不重新渲染预览

Vue storybook globalTypes not re-rendering preview

vue.js

storybook