Having all the stores globally available

[mgussekloo]

Hi,

Thanks for Pinia. I have a beginner question about best practices / advice;

Currently I import the stores in all of my components.

import { mapStores } from 'pinia';
import { useJsonStore } from '@/stores/json';
import { useLocationStore } from '@/stores/location';

What would be the best way to prevent repeating these kind of lines in a lot of components? In Vuex you get this.$store, is there an equivalent for Pinia? Or should I think about it a different way... (or is repeating these lines the best way).

[soc221b]

Try this: https://github.com/antfu/unplugin-auto-import.

[posva]

You can do something like

AutoImport({
  imports: [
    'pinia',
    { '@/stores/mystore': ['useMyStore'] },
  ]
})

You can likely automate this or export all of some files

For Nuxt, only top level files (stores/*) are included. This can be changed with the storesDirs option or directly with the imports option in Nuxt

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './domain/*/stores'],
  },
})

[mrleblanc101]

I tried this but it doesn't work:

export default defineNuxtConfig({
    imports: {
        imports: ['pinia'],
        dirs: ['stores'],
    },
});

Type 'string' has no properties in common with type '{ name?: string | undefined; as?: string | undefined; from?: string | undefined; priority?: number | undefined; disabled?: boolean | undefined; meta?: { [x: string]: any; description?: string | undefined; docsUrl?: string | undefined; } | undefined; type?: boolean | undefined; }'.

[mrleblanc101]

unplugin/unplugin-auto-import#402

[mgussekloo]

Thanks! This is a cool way to remove boilerplate. If I understand it correctly, using this library does the same importing, but hides it from view. So I guess there is nothing inherently wrong or inefficient about doing all those imports, right?

[IgChi]

No need additional modules. Nuxt 3 config:

modules: [
  ['@pinia/nuxt', { autoImports: ['defineStore'] }],
],
imports: {
  dirs: ['./stores']
},

[azulkipli]

No need additional modules. Nuxt 3 config:

modules: [
  ['@pinia/nuxt', { autoImports: ['defineStore'] }],
],
autoImports: {
  dirs: ['./stores']
},

I try this, but got error

Cannot start nuxt:  Nuxt module should be a function: [object Object]     

any help please

[Vesely]

@azulkipli replace line 21 (modules: ['@pinia/nuxt', { autoImports: ['defineStore'] }],) with

modules: [
    ['@pinia/nuxt', { autoImports: ['defineStore'] }],
],

You're missing brackets there.

[azulkipli]

thank you,
nuxt not error
but
got error like this

and if i use in my nuxt component like this (without import the store)
I got error
ReferenceError: useCounterStore is not defined
this is my component

<script setup>
// import { useCounterStore } from '~~/stores/counter'
const counter = useCounterStore()
const count = counter.count
console.log('count:', count)
const doubleCount = counter.doubleCount
console.log('doubleCount:', doubleCount)
</script>
<template>
  <div class="p-2">
    <div class="p-1">Count Pinia: {{ singleCount }}</div>
    <div class="p-1 mb-1">doubleCount : {{ counter.doubleCount }}</div>
    <div class="p-1 mb-1">doubleCount computed : {{ doubleCount }}</div>
    <button class="px-3 border mx-1" @click="counter.increase()">
      +
    </button>
    <button class="px-3 border mx-1" @click="counter.decrease()">
      -
    </button>
  </div>
</template>

[Vesely]

@azulkipli try to rename autoImports to imports in nuxt.config, like this

imports: {
    dirs: ['./stores'],
  },

[azulkipli]

oh error VSCode disappear if I use

imports: {
    dirs: ['./stores']
},

instead of

autoImports: {
  dirs: ['./stores']
},

[ammiiir1]

I tried everything but none of them worked,
the only way it worked for me was adding them as presets to nuxt.config file.

Here is an example

Add your stores like code below to nuxt.config.ts :

export default defineNuxtConfig({  
  imports: {
     presets: [
        {
          from: '~~/stores/aaa',
          imports: ['useAaaStore']
        },
        {
          from: '~~/stores/bbb',
          imports: ['useBbbStore']
        },
        {
          from: '~~/stores/ccc',
          imports: ['useCccStore']
        }
     ]      
  }
})

then you can use stores inside any .vue file without importing them.