如何从Storybook控件更新存储值？[Vuejs，Storybook]

Question

我有一个Vue3组件，它使用我的auth商店(Pinia)来确定用户是否已登录。我想要创建一个故事，用户可以切换一个Storybook布尔控件来设置auth状态。

我需要的是某种钩子，当Storybook控件由用户在Storybook UI中更新时，我可以使用它在auth存储上执行一个操作来设置登录的用户。这个是可能的吗？

Answer 1

我通过使用Vue组件的创建钩子来解决这个问题。

import { useAuthStore } from "@src/stores/auth";
import { Meta, Story } from "@storybook/vue3";
import MocNav from "./MocNav.vue";

const auth = useAuthStore();

export default {
  title: "components/MocNav",
  components: { MocNav },
} as Meta;

const Template: Story = (args) => ({
  components: { MocNav },
  setup() {
    return { args };
  },
  template: "<MocNav v-bind='args' />",
  created() {
    if (args.authenticated) {
      auth.login(...);
    } else {
      auth.logout();
    }
  },
});

export const Default = Template.bind({});
Default.args = {
  authenticated: true,
};

用户现在可以使用Storybook窗体控件来更改auth存储状态。