How can I update store value from Storybook control? [Vuejs, Storybook]

Question

I have a Vue3 component that uses my auth store (Pinia) to determine whether the user is logged in. I would like to create a story where the user can toggle a Storybook boolean control to set the auth state.

What I need is some sort of hook that I can use when the Storybook control is updated by the user in the Storybook UI where I can then perform an action on the auth store to set the user as logged in. Is this possible?

Answer 1

// Storybook default settings
import { useGlobalStore } from "@/stores/GlobalStore"
import HeaderSmart from "@/lib-components/HeaderSmart"



export default {
    title: "GLOBAL / Header Smart",
    component: HeaderSmart,
}

const mock = {
    secondary: [
        {
            id: "843",
            name: "Locations & Hours",
            to: "/locations",
            classes: "",
            target: "",
        },
        {
            id: "844",
            name: "Ask a Librarian",
            to: "/research-teaching-support/research-help",
            classes: null,
            target: "",
        },
        {
            id: "845",
            name: "My Account",
            to: "https://catalog.library.ucla.edu/vwebv/login;jsessionid=9D14C6523970C30728D965F6BD6B914D",
            classes: null,
            target: "1",
        },
    ],
    primary: [
        {
            id: "835",
            name: "Get help with...",
            to: null,
            classes: "",
            target: "",
            children: [
                {
                    id: "833",
                    name: "Borrowing Books and Equipment",
                    to: "/help/services-resources/borrowing-books-and-equipment",
                    classes: "",
                    target: "",
                },
                {
                    id: "840",
                    name: "All Services & Resources",
                    to: "/help/services-resources",
                    classes: "",
                    target: "",
                },
            ],
        },
        {
            id: "834",
            name: "Visit",
            to: "/events-exhibits",
            classes: null,
            target: "",
            children: [
                {
                    id: "841",
                    name: "Locations & Hours",
                    to: "/visit/locations",
                    classes: "",
                    target: "",
                },
                {
                    id: "837",
                    name: "Events & Exhibitions",
                    to: "/visit/events-exhibits",
                    classes: "",
                    target: "",
                },
            ],
        },
        {
            id: "836",
            name: "About",
            to: null,
            classes: null,
            target: "",
            children: [
                {
                    id: "842",
                    name: "Library News",
                    to: "/about/news",
                    classes: "",
                    target: "",
                },
                {
                    id: "838",
                    name: "Staff Directory",
                    to: "/about/staff",
                    classes: "",
                    target: "",
                },
            ],
        },
        {
            id: "839",
            name: "Support us",
            to: "https://giving.ucla.edu/Standard/NetDonate.aspx?SiteNum=463",
            classes: null,
            target: "1",
            children: [],
        },
    ],
}

// Variations of stories below
export const Default = () => ({
    created() {
        const globalStore = useGlobalStore()
        globalStore.header.primary = mock.primary
        globalStore.header.secondary = mock.secondary
        globalStore.winWidth = 824
    },

    components: { HeaderSmart },


    template: `<header-smart />`,
})