We love that every time we open an index.js file that we can see everything there. It's just what we do. You can create a separate file for it. You don't have to, it's completely up to you.
I definitely recommend creating separate files for actions, getters and mutations because there is a lot of logic behind those methods. We trust those logic, right? And that's why we don't want to look at it. We just want to import it and have a clean look of the state.
Finally, we need to export default.object by setting, of course, namespace to true, passing state, mutations, actions and getters. The process is the same for all modules. So I won't repeat the same thing for user module right now, because it's literally the same.
What we need to do now is update our root store. To do so, we need to import user module, import organization module, and import our module object with all the names. Then, we're gonna declare global state, global actions, global mutations, and global getters. Be careful with them because they are accessible at the global namespace. That's the place where they will be registered. Right now, they're empty, but the process is the same as with the ones which are namespaced, the process for creating them.
Then, we need to create modules folder. We're gonna map user module to username and organization module to organization name we're getting from the module const. Finally, we need to use create store from Vuex. We need to export default let object with state, actions, mutations, getters, global ones, and modules. And that's it. We have it now. We have that clean, scalable, and flexible architecture of the store for your massive app.
Let's take a look at it. At the top, we have index.js file, our root store. That root store has its own global state actions, mutations, and getters. But from the second layer, that root store imports all the different modules you have. Right now, we have only organization and user, but you're going to have much more, trust me. And then all those different kinds of modules from the second layer, import their own isolated actions, getters, mutations, state from the third layer. Right now at Orbital Witness, we don't have any problems with this architecture.
Comments