Vue storybook 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({
    ...