如何从Storybook控件更新商店值?[Vuejs,Storybook]

mkshixfv  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(142)

我有一个Vue3组件,它使用我的auth存储(Pinia)来确定用户是否登录。我想创建一个故事,用户可以在其中切换Storybook布尔控件来设置auth状态。
我需要的是某种挂钩,当Storybook UI中的用户更新Storybook控件时,我可以使用它,然后在授权存储上执行一个操作,将用户设置为已登录。这可能吗?

jyztefdp

jyztefdp1#

我设法通过使用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表单控件更改身份验证存储状态。

相关问题