我有一个Vue3组件,它使用我的auth存储(Pinia)来确定用户是否登录。我想创建一个故事,用户可以在其中切换Storybook布尔控件来设置auth状态。我需要的是某种挂钩,当Storybook UI中的用户更新Storybook控件时,我可以使用它,然后在授权存储上执行一个操作,将用户设置为已登录。这可能吗?
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表单控件更改身份验证存储状态。
1条答案
按热度按时间jyztefdp1#
我设法通过使用Vue组件创建的钩子解决了这个问题。
用户现在可以使用Storybook表单控件更改身份验证存储状态。