Pinia store doesn't work

[romanslonov]

Hello, I did a mimial reporpoduction what is actually doesn't work for me. I define a pinia store for modal component and then trying to open the modal in story but store doesn't seems to work properly, values are not changing. Maybe I am doing something wrong? Help please.

I also have a warn in console about so maybe there is an issue with initialization:

[Vue warn]: injection "Symbol(pinia)" not found. 
  at <Modal.story story= {id: 'src-stories-modal-story-vue', title: 'Modal', group: null, layout: {…}, icon: null, …} > 

Repo: https://github.com/romanslonov/histoire-pinia-issue

[victorlmneves]

@romanslonov I have used Pinia on one component and it's working, but I didn't use the global config, I have set up it on the story

function mySetupApp ({ app }) {
  app.use(createPinia());
}

<Story group="form" title="Components/Form/FormValidationScope" :setup-app="mySetupApp">

Try this way to see if works

[hrishikesh-k]

@victorlmneves Unfortunately, that doesn't work and it thrown an error:

getActivePinia was called with no active Pinia. Did you forget to install pinia?

Do you happen to have an example handy where you had got it working successfully?

[victorlmneves]

on both examples that I have provided you have access to the store inside the story

[hrishikesh-k]

I provided the exact reproduction of why I need that line. In the story, I need to see the count as well as within the actual component. If you've any other way of accessing the data inside the story, feel free to let me know. If not, based on the other discussion I shared, this is indeed an issue with Histoire.

The only reason I participated in this discussion was because I'm not able to share the state of the store in the story as well as the actual component. I can create an instance of the store in both, but both those instances are not linked to each other, that is, changes made in one are not visible in the other. This was fairly evident in the reproduction I shared in the beginning. To explain it again (refer to my original reproduction):

1. In v-button.story.vue on line 15, I have: <p>Count in story: {{vButtonStore.count}}</p>
2. In v-button.vue, on line 10, I have: <p>Count in component: {{vButtonStore.count}}</p>

I need both of those to stay in-sync with the value in the store. My problem is not only being able to pass Pinia, but to also read data and make changes to it from the component as well as the story. Without this, I don't see why someone would need to pass the store.

Maybe your code works, but I don't know how I can access the data from the store without calling useButtonStore().

[victorlmneves]

That doesn't work even if you set pinia globally, because then you get a kind of stores for the count, one from within story and the generic one
Here is an example of what you did without the pinia error, but as can see, you increment it using the button but the value form the one you set on the story doesn't get updated as it's a "different store" that you set directly on the story
https://stackblitz.com/edit/hk-histoire-d-151-j9ce7p

[victorlmneves]

In all examples I provide you have access to store directly on the story by importing the component that has that functionality and to be honest I'm not getting why you are adding that paragraph and the need of "2 stores"

[hrishikesh-k]

I'm sorry, I'm sure it's me, but there's probably some kind of mis-communication happening due to which I'm unable to explain myself properly. As of now, I'll continue with my workaround linked earlier. Thanks for chiming in.