Import w Vue3 czasem działa a czasem nie ...

Zacząłem uczyć się vue i natrafiłem na dziwny problem. Zdefiniowałem dwa store, które leżą w tym samym folderze: posts.store.js i auth.store.js. Importując je do komponentu zauważyłem ze zdziwieniem, że useUsersStore mogę zaimportować taką ścieżką:

import { useUsersStore } from '@/stores';

ale już do importu posts muszę dać taką ścieżkę:

import { usePostStore } from "@/stores/post.store.js";

Store zdefiniowane są w ten sposób:

export const usePostStore = defineStore('postStore', {})
export const useUsersStore = defineStore('users', {})

Więc nie bardzo widzę powód dla którego miałby być konieczny różny import.

Jeśli spróbuję zrobić

import { usePostStore } from "@/stores";

dostaję

Uncaught SyntaxError: import not found: usePostStore

Czy istnieje jakieś logiczne wytłumaczenie?

A masz może plik /stores/index.js ? Jeżeli tak, to co w nim jest?

EDIT: wygląda też, że masz jakiś "import path" mapping -> czyli to "@" w "from "@/stores". Możesz pokazać jak to jest zdefiniowane?

Faktycznie, spojrzałem i chodziło o mapowanie w index.js w folderze stores, wcześniej:

export * from './auth.store';
export * from './users.store';

Działająca poprawka:

export * from './auth.store';
export * from './users.store';
export * from './post.store';

Dzięki za pomoc!

Na marginesie, barrel files (czyli ten index.js którego jesdyną rolą jest exportowanie dalej modułów) jest trochę "bad practice". Jeżeli nie musisz, to raczej bym unikał takiego rozwiązania. Patrz https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/