Import the store in every component VS import once and pass data through props

[ozoono]

HI, i have a doubt about what would be the best way to use a pinia store in my app.

Let's Imagine i have several stores, and one the them (the main store) holds an object with a big amount of different values. Every component in the app will need a few of them.

I can't think about two different ways to do it:
import the store in the main component and pass needed data to each child component using props (or use provide/inject)
or
use the store in every component importing the "big" object (and avoiding props) , although the components only needs a small part of it

I don't know if import the store so many times could affect performance, so what do you think would be the best approach?

regards

[ravitvv]

Have you found it answer, I have the same question in my mind.

[aphrxia]

I would use provide/inject on the parent of the "group" of components that need the stores. To pass further down to their children, I would use props for states, getters and sometimes actions. That's how I use Pinia in my app. So it depends on how I organize my component structure as well.

For example I have this mainStore and storeA
I also have componentA, componentA1, componentA2

I will always make sure to organize these components in a hierarchy, and then pass the main store only to the parents of their groups, so for example for storeA:

In ComponentA

<script setup>
    import { provide } from 'vue'
    import { useStoreA } from '...'

    import ComponentA1 from '@...'

    const storeA = useStoreA()    
    provide('storeA', storeA) // only in here
</script>

<template>
    <ComponentA1 />
</template>

In ComponentA1

<script setup>
import { inject } from 'vue'
import ComponentA2 from '...'
const storeA = inject('storeA')
</script>

<template>
    {{ storeA.someState }} - {{ storeA.someGetter }}

    <ComponentA2 :foo="storeA.otherState" :barHandler="storeA.someAction" />
</template>

If I need to have access to some of the states from mainStore in some child components, I will make this store available in the root of my layout component:

In my AppLayout.vue (global) or for example ProjectsLayout.vue etc

<script setup>
    import { provide } from 'vue'
    import { useMainStore } from '...'
    const appState = useMainStore() // the "big" main store

    provide('appState', appState)
</script>

<template>
    <slot />
</template>

Then for example in ComponentA1 where I need access to certain states from this store, I can just use the inject like before and access the state from the inject const.

But if know which state I want, I will expose that using Pinia's storeToRefs in my main layout component:

<script setup>
    import { provide } from 'vue'
    import { storeToRefs } from 'pinia'
    import { useMainStore } from '...'
    
    const appState = useMainStore() 
    const { state1, state2, ...etc } = storeToRefs(appState)

    // I will keep this if I still want to use actions 
    // in my child components down the road. Yes,
    // I can still access states here.
    provide('appState', appState)
    
    // but here, I will just put states.
    // I can provide only the states I know my components will need.
    provide('appButtonStates', {
        state1,
        state2,
    })
</script>

In ComponentA1 where I need the access.

<script setup>
...
const { state1 } = inject('appState') // ComponentA1 only needs state1
</script>

<template>
    <MyButton v-disabled="!state1"></MyButton>
</template>

Idk if this is the best practice since I am fairly new to Pinia but it fits my app structure, feels natural enough, and works for me.

[umutcantopal]

how can you handle types? I use vue with typescript and in my IDE it shows it's type as any and autocomple doesn't work. for example: I can type a variable in action method param which non supported but it doesn't underline with red line it?

[aphrxia]

Hi @umutcantopal I am sorry buddy, I don't use TS :(

[wcheek]

@umutcantopal The documentation shows how to type provide/inject:

Define your key using InjectionKey:

// injectionKeys.ts
export const myInjection = Symbol() as InjectionKey<string>;

Now provide using the key:

// parent.vue
<script setup lang="ts">
provide(myInjection, "injected string");
</script>

and inject:

// child.vue
<script setup lang="ts">
// typed as string | undefined
const myInjectedString = inject(myInjection);
</script>