Using pinia inside component library

[sethjwilliamson]

I have two repositories. The first repository is an actual app website. The other is a component library that contains all of the components that will be used inside the website.

I am trying to make it so all states are instantiated on the parent repository. Then the components inside the component library need to have access to these pinia objects.

How I'm currently thinking about it is that the interface would be defined in the component library then would be implemented on the parent repository.

This is how it's set up in my repositories right now.

// Component Repository
// types/stores/cardJson.ts

export interface CardJsonStoreState {
  cardJson: CardJson;
}
  
export interface CardJsonStoreActions {
  update(cardJson: CardJson): void;
}

// Parent Repository
// types/stores/cardJson.ts

export const useCardJsonStore = defineStore<'cardJson', CardJsonStoreState, {}, CardJsonStoreActions>('cardJson', {
  state: () => ({
    cardJson: []
  }),
  actions: {
    update(cardJson)  {
      this.cardJson = cardJson;
    }
  }
})

With this set up, accessing the state store on the parent repository is obviously very easy.

import { useCardJsonStore } from './types/stores/cardJson';
useCardJsonStore().cardJson

But I'm not sure how to set it up so that the store is accessible to be able to do the same thing on the component repository.