如何从 Storybook 控件更新商店价值？ [Vuejs，故事书]

【问题标题】：How can I update store value from Storybook control? [Vuejs, Storybook]如何从 Storybook 控件更新商店价值？ [Vuejs，故事书]
【发布时间】：2022-11-10 23:42:14
【问题描述】：

我有一个 Vue3 组件，它使用我的身份验证商店（Pinia）来确定用户是否已登录。我想创建一个故事，用户可以在其中切换 Storybook 布尔控件以设置身份验证状态。

我需要的是某种钩子，当用户在 Storybook UI 中更新 Storybook 控件时，我可以使用该钩子，然后我可以在身份验证商店上执行操作以将用户设置为已登录。这可能吗？

【问题讨论】：

标签： vue.js storybook

【解决方案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 表单控件来更改身份验证存储状态。

【讨论】：