Vuex stores and vertical application architecture not working

[Walnussbaer]

Hello everyone,

we are building a large Quasar app. Until now, we used a horizontal architecture, which looked like this:

src
-- views
-- components
-- router
-- service
-- store
...

Inside the different horizontal layers, there were our application specific modules or "contexts". This looked like this:

src
-- views
---- userManagement
----serverMangement
----...
-- components
---- userManagement
---- serverMangement
...

As it is not best practice to build applications using a horizontal architecture anymore, we wanted to refactor the whole application, using a vertical approach, which is - as far as I know - the most maintainable solution.

This should look like this:
src
--core
---- store <-- this is where the main store lies, which imports the store modules from the other vertical application slices
--userManagement
----views
----components
----store
----service
...
--serverMangement
----views
----components
----store
----service
...

Everyhting worked fine during the refactoring. The quasar app compiles just fine. But when launching the app in the browser, I get the following error: Uncaught ReferenceError: can't access lexical declaration 'serverManagementStore' before initialization

What I then did was that I put the main store ( which holds the stores of our vertical application slices as modules) into the root of the project
src / store / index.ts

But that did not fix the problem.

I then found out, that in a Quasar app, alle modules of a store have to be in the same folder as the main store (which holds the modules) (https://quasar.dev/quasar-cli/vuex-store)

Now I wonder: Is this the reason why I get this exception I mentioned above? Is there now way of implementing a complete vertical application architecture using quasar and vuex? I really would like to distribute the store modules into their respectice application slices.

To be honest, doing something like this ..

src
-- store
----index.ts
----userManagement
------index.ts
----serverManagement
------index.ts

... doesn't feeld very good and does not follow best practices and current knowledge of developing enterprise applications.

Thanks in advance for any helpful answers or some discussion! :) Maybe I am doing something wrong here ...

[yusufkandemir]

Hi 👋
First of all, if you want to use src/core/store instead of src/store, you can set quasar.conf.js > sourceFiles > store to src/core/store. Here is the documentation about it: https://quasar.dev/quasar-cli/quasar-conf-js#property-sourcefiles

However, the main problem here is happening because of how you are initializing and accessing some variables. According to the error message you give, the code is probably looking like this(or uses a similar principle):

function test() {
  console.log(serverManagementStore);

  const serverManagementStore = 'whatever';
}

Chromium-based:

Firefox(exactly the same message):

So, if you still can't figure out what's wrong, you will need to share a repro or some code in order for us to help. Good luck!

[Walnussbaer]

Thanks for your reply @yusufkandemir .

However, I fixed the problem. When I did the refactoring using IntelliJ (instead of with VS Code), everything worked out.

There must have been some error which occurred during the refacotring/ moving of files and folders inside the project structure.

It doesn't make much sense to me, because everything compiled fine. Maybe I should have cleaned the "dist" folder after my first refactoring, but I can't even find the dist folder in a Vue/ Quasar project. It's probably hidden in some weird nested folder inside the quasar project structure. So anyways, it is working now and thanks for your response again.

[MilosPaunovic]

dist folder is created after running quasar build command.

[Walnussbaer]

@MilosPaunovic thanks, my colleague told me that this morning. I'm still wondering where the content of the "dist" folder ist stored/ kept when I run the application using quasar dev. I mean, they must be somewhere after compilation, otherwise, how would the application be able to start?

[yusufkandemir]

@Walnussbaer some parts like entry code are stored on .quasar. But, the rest(compiling) is done on memory by the webpack dev server:

webpack-dev-server doesn't write any output files after compiling. Instead, it keeps bundle files in memory and serves them as if they were real files mounted at the server's root path