How to use storage globally?

[allsilaevex]

Hello everyone! Please tell me, I want to create a store and use it in different components.
I create a store like this

src/app/stores/global/index.ts

import { defineStore } from 'pinia';

export const useStore = defineStore('global', {
  state: () => ({
    //
  }),
});

And use them like this

src/components/Foo.vue

<script setup lang="ts">
import { useStore } from '@/app/stores/global';

const store = useStore();
</script>

This creates a new store in each component (which looks logical). But I need shared storage, not separate...
And so that it works correctly with SSR and that there is no data leakage between threads.

[soc221b]

The state will be shared globally 🤔.

https://pinia.vuejs.org/introduction.html#why-should-i-use-pinia :

Pinia is a store library for Vue, it allows you to share a state across components/pages. If you are familiar with the Composition API, you might be thinking you can already share a global state with a simple export const state = reactive({}).

src/component/Foo.vue

<script setup lang="ts">
import { useStore } from '@/app/stores/global';

const store = useStore(); // this store is the same as the store in `Bar.vue`
</script>

src/component/Bar.vue

<script setup lang="ts">
import { useStore } from '@/app/stores/global';

const store = useStore(); // this store is the same as the store in `Foo.vue`
</script>

If you are interested in the underlying technology, please refer to effectScope in Vue: Effect scope api.

[projct1]

Hiho)
I dont want declare store in 100k my components like this:

<script setup>
import {useCartStore} from '../../stores/CartStore'

const store = useCartStore()
</script>

I want get acces for store globally, without copy and paste code above.
It is possible?)

[TheOrgPlanDev]

Can't think of anything that will reduce your effort. However if your code structure is nested, you can use alias and shorten the import path to make copy paste easier. So instead of import {useCartStore} from '../../stores/CartStore' you'd do import {useCartStore} from '@stores/CartStore'

[projct1]

I dont want import store in all components. I want declare one time. In other words, something like this:

//app.js

import useCartStore from '../../stores/CartStore'

window.cartStore = useCartStore()

//some of component, just using my store

<template>
    <div v-for="product in cartStore.products">
        //...
    </div>
</template>

Is this the right approach?

[Jas-n]

Just figured this out for myself using the composition API, as it seems silly to declare a global store in every component.

// /store/app.js
// ...
state: () => ({property: 'value'})
// ...

// main.js

// Imports
import { useAppStore } from '@/store/app';
// ... Other Imports

const app   = createApp(App);
const pinia = createPinia();

app.use(pinia);

app.config.globalProperties.$app = useAppStore();

app.mount('#app')

// Some component
<script>
    export default {
        data() {
            console.log(this.$app.property); // Outputs 'value'
        }
    }
</script>

[soc221b]

Pinia conveniently adds itself as $pinia to your app.

Suppose you have a counterStore:

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counterStore', () => {
  const currentValue = ref(0)

  return {
    currentValue,
  }
})

You can access the currentValue like this:

<template>
  <div>count is: {{ $pinia.state.value.counterStore.currentValue }}</div>
</template>

https://pinia.vuejs.org/ssr/#Using-the-store-outside-of-setup-

---

But the $pinia.state.value is not much type safe:

const pinia = createPinia()
app.use(pinia)
app.config.globalProperties.$p = pinia

pinia/packages/pinia/src/createPinia.ts

Line 30 in 207e527

app.config.globalProperties.$pinia = pinia

(Cannot figure out how to narrow the original state property now...)

import type { Ref } from 'vue'
import type { Pinia } from 'pinia'
import { useCounterStore } from 'path/to/counter-store'

declare module 'vue' {
  export interface ComponentCustomProperties {
    $p: Omit<Pinia, 'state'> & {
      state: Ref<{
        counterStore: ReturnType<typeof useCounterStore>['$state']
      }>
    }
  }
}

pinia/packages/pinia/src/globalExtensions.ts

Line 14 in 207e527

$pinia: Pinia

Then access the type safe one instaed:

<template>
  <div>count is: {{ $p.state.value.counterStore.currentValue }}</div>
</template>

---

Perhaps we could do better for the state property 🤔 .

[IceflowRE]

Cannot find name 'useAppStore'.

I love incomplete examples.