How to have a global pinia state used by every component and the story?

[timmaier]

I ran into what might be an issue or a configuration problem where a story wouldn't use the same pinia instance as the components the story renders.

Here is a replication: https://stackblitz.com/edit/histoire-vue3-starter-djkrtr?file=src%2FBaseButton.story.vue,src%2FBaseButton.vue

In this example I would expect the state side to be the same value in both the story and component button however they are not coupled.

I found a similiar discussion here: #151 but am unsure how to then have access to the app store for example in the stories template. I tried using

function mySetupApp({ app }) {
  const pinia = createPinia();
  app.use(pinia);
  const appStore = useAppStore(pinia);
  app.config.globalProperties.$appStore = appStore;
}

[awacode21]

i can confirm that i am experiencing the same issue.

Versions i am using in my setup:

"vite": "^3.2.2",
"@vitejs/plugin-vue": "^3.2.0",
"@histoire/plugin-vue": "^0.11.7",
"histoire": "^0.11.7",
"vue": "^3.2.41",
"pinia": "^2.0.23",

[hrishikesh-k]

I'm facing the same issue. I spent a lot of time wondering why the state in my component is not updating when a change was triggered from the story. I'm using Histoire v0.16.1.

Is there any solution/workaround? My component depends on the value from store to render, so I'm unable to test this one at all. 🙁

[hrishikesh-k]

I'm now using a workaround in my component. Instead of relying only on store to get the value, I also accept the value as a optional prop. However, the default value of the prop comes from the store. So, in my Story, I pass the value as a prop, but in the actual app, I manipulate my store.