如何通过Storybook控件更新Pinia认证状态？[Vue3, Storybook]

完全可行，下面是具体实现步骤：

1. 配置Storybook的布尔控件 #

在你的故事文件里，定义一个布尔型参数用于控制登录状态：

export default {
  title: '目标组件名称',
  component: TargetVueComponent,
  argTypes: {
    isLoggedIn: {
      control: 'boolean',
      defaultValue: false,
      description: '切换用户登录状态'
    }
  }
};

2. 监听控件变化并同步更新Pinia Store #

借助Storybook的useArgs钩子监听参数变化，实时更新auth store的状态：

import { useArgs } from '@storybook/vue3';
import { watch } from 'vue';
import { useAuthStore } from '@/stores/auth';

const Template = (args) => ({
  components: { TargetVueComponent },
  setup() {
    const [currentArgs] = useArgs();
    const authStore = useAuthStore();

    // 监听登录状态参数变化，同步调用store方法
    watch(() => currentArgs.isLoggedIn, (newStatus) => {
      newStatus ? authStore.login() : authStore.logout();
    }, { immediate: true }); // 初始化时同步一次状态

    return { args };
  },
  template: '<TargetVueComponent v-bind="args" />'
});

export const Default = Template.bind({});
Default.args = {
  isLoggedIn: false
};

3. 确保Storybook中Pinia已初始化 #

如果还没配置，需要在.storybook/preview.js中添加Pinia的初始化逻辑：

import { createPinia } from 'pinia';
import { app } from '@storybook/vue3';

app.use(createPinia());

完成以上配置后，在Storybook UI中切换isLoggedIn控件时，就会自动触发auth store的登录/登出方法，同步更新组件的认证状态。

内容的提问来源于stack exchange，提问作者Steven Gillies