Using Pinia store in Storybook

Question

I am creating a app which allows multiple themes. The theme id is stored in a pinia store (app.store.ts) which is them accessed in multiple components using a getter. Im creating stories for these components for my designer to view but the way i have coded the component accesses the store via a getter. I want to display all of the possible theme styles on the one page using storybook but I'm not too sure how to (if at all possible) update the store before i write the next story.

So AuthInputTheme1 shoiuld use theme_id 1, and AuthInputTheme2 should use theme_id 2. Is this possible or should i just pass in this id as a prop?

Code examples are below:

storybook/preview.ts

const pinia = createPinia();

setup((app: App): void => {
  app.use(FloatingVue)
  app.use(pinia);
});

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

stortbook file

import AuthInput from './AuthInput.vue';

const meta = {
  title: 'Molecule/AuthInput',
  component: AuthInput,
  tags: ['autodocs'],
  args: {},
} satisfies Meta<typeof AuthInput>;

export default meta;

type Story = StoryObj<typeof meta>;

export const AuthInputTheme1: Story = {
  args: {},
};

#update store here?

export const AuthInputTheme2: Story = {
  args: {},
};

app.store.ts

export const useAppStore = defineStore('appStore', {
    state: (): IntakeFormStore => ({
        theme_id: 1,
    })
};