Alternate import syntax

[AbrahamBrookes]

In an effort to clean up my code I am writing my stores a little differently. The docs say to export useStore and then in the importing component do like so:

import { useStore } from 'store'
const store = useStore()

But I want to cut down on boilerplate code. So instead, I am writing my store and exporting the result of useStore directly from my store module. Observe:

import { defineStore, createPinia } from 'pinia'
const pinia = createPinia()

export const useAuthStore = defineStore('auth', {
    state: () => ({
        user: null,
    }),
	getters: {
		role() {
			return this.user ? this.user.role : null
		},
	},
    actions: {
        set(auth) {
            this.user = auth.user
        },
    }
});

const store = useAuthStore(pinia)

export default store

Then in my component I can simply import auth from 'authStore'

This works! However, in dev tools my Pinia screen is empty. It seems that exporting my store like this skips a registration step somewhere? Am I doing something silly here? I really like the one line import but I also want the debug features of the dev tools. Ideas?

[posva]

Yes, this is a bad idea: it will break in some scenarios:

• SPA: if useStore() is called before app.use(pinia)
• SSR: always

To cut the boilerplate, you should instead use the unplugin auto import library

[AbrahamBrookes]

Could you expand on how this will break things? I'd like to understand more. And are you talking about this library?