如何通过@ storybook /addon-context在vue js项目中使用storybook切换区域设置

Question

我正在寻找一个能够从vue-i18n在storybook内部切换语言环境的示例。我在官方故事书github上找到了这个addon-context story，但我在制作作品时遇到了一些困难。

我使用的是storybook v5.3、vue.js v2.6和vue-i18n v8.15.4。

目前，我有两个条目的地球图标(英语和法语)。但是当我切换时，它对vue-i18n语言环境没有影响。

// .storybook/main.js
module.exports = {
  stories: ["../../src/**/*.stories.(js|jsx|ts|tsx|mdx)"],
  addons: [
    // ...
    "@storybook/addon-contexts"
  ]
};

// .storybook/preview.js

// Storybook
import { withContexts } from "@storybook/addon-contexts/vue";
import { addDecorator, addParameters } from "@storybook/vue";
import { contexts } from "./contexts";

// Internationalisation
addDecorator(() => ({
  i18n,
  beforeCreate: function() {
    this.$root._i18n = this.$i18n;
  },
  template: "<story/>"
}));
addDecorator(withContexts(contexts));

// .storybook/contexts.js
export const contexts = [
  {
    icon: "globe",
    title: "Languages",
    params: [
      {
        name: "English",
        props: {
          value: { locale: "en" }
        }
      },
      {
        name: "French",
        props: {
          value: { locale: "fr" }
        }
      }
    ]
  }
];

Answer 1

经过几次尝试，我找到了一个可行的解决方案。注意:每个故事都由一个div插槽组件包装，该组件监视由addon-context使用的本地，并设置vue-i18n locale。

// .storybook/contexts.js
const createContext = (initialValue) => {
  return {
    name: `Context.i18n`,
    props: ["value"],
    watch: {
      value: function(newValue, oldValue) {
        this.$root._i18n.locale = newValue.locale;
      }
    },
    template: `<div><slot /></div>`
  };
};

const i18nContext = createContext({
  locale: "en"
});

export const contexts = [
  {
    icon: "globe",
    title: "Languages",
    components: [i18nContext],
    params: [
      {
        name: "English",
        props: {
          value: { locale: "en" }
        }
      },
      {
        name: "French",
        props: {
          value: { locale: "fr" }
        }
      }
    ]
  }
];

Et voilà！:)