From an architectural point of view what is the best to separate/structure the Vuex Store into modules? I tend to create a module for each major routes when using Vue router.
When using this approach (diving modules by Views) I often occur the case that I have dependencies between the pages and Vuex modules.
The provided example of Vuex documentation is recommending a domain driven approach?
https://vuex.vuejs.org/guide/structure.html
I usually create my modules around my data rather than around the routes calling the data. The point of state management in Vuex is to allow access to data from multiple components and routes after all. So for example, if I'm querying an API for a user, I'll make a module related to that user object. Similarly, if you have a themed UI, I would create a module for switching themed elements. Or if you are using a toast notification to display success/error messages that might be a good candidate for a module.
Related
Developing a Windows Desktop application that uses Chromium Embedded Framework for the UI frontend, but I assume this would apply equally to Electron and similar platforms as well.
The application will have multiple pages, each implemented as its own component. In a traditional SPA this would typically be implemented using Vue Router, but I assume the main benefits of Vue Router are the ability to route to the appropriate resource based on URI, parse URI query parameters, and enable the forward and back buttons with history.
Since none of these really apply to my Desktop application, I am thinking that Vue Router will bring little to the table and just add more boilerplate noise to the codebase. If I'm missing something and there is a significant benefit in Vue Router for my use case, please let me know.
Side note: I do plan on using Vuex to allow the different page components to work on the same set of state data without a lot of tedious prop/event binding.
I would still opt for vue-router, since it provides a standardized way for in-app routing in Vue apps. It is not some sort of exotic dependency you are introducing.
If your app is growing and you need things like nested routes and dynamic routing, passing props to a route, having navigation guards like ‘beforeEach’, you can just use it, without creating your own solution or rework the app to use the router. Also, another vue developer immediately understands the app routing and so do you, if you have to change something in the app after a year not working on it. And it is all well documented.
And you are developing a desktop app, which makes a few kB more or less in the bundle not a concern, I would think.
Automatic active link CSS classes
HTML history with back/forward navigation support
Nested components
etc.
I'm new to Vue, and using it to build a SPA (Vue v3). I'm using the VueX library to store global application state.
To try to keep my store clean (as it will grow unmanageable as the application gets bigger), I'm using modules, as explained on the Vuex website. But it seems like this feature requires a lot of extra boilerplate: I have to go through the root store to get to my modules (which makes me wonder what the point is: why is store.moduleA.moduleB.state.val better than store.state.A.B.val?).
Is it possible to have multiple independent Vuex stores in my application, instead of a single root store with modules? If so, why wouldn't I do this (allowing more direct access to my data), instead of using a single store with modules?
I am trying to use nuxtjs for ssr. I am not sure should I use vuex for all api calls. I could use asyncData hook to call api and use it in page directly without using vuex. I read online tutorials which advice to use store in for almost all api call and use store in page/component. I really don't see the benefit of using vuex for api call and use store for page/component.
Can anyone point me to right direction and point me to the correct article, link or code base?
You're free to design your state the way you want!
Vuex store isn't mandatory at all. Once you really understand how it works, you can decide whether it's worth it or not for your case. It's a matter of personal judgment.
I advise you to forget about using Vuex if you feel like it will be simpler to store your data in your page / components.
Vuex store is mainly designed to share data across different pages / component to avoid having a long chain of props / events. If you don't need that in your case, don't go for it, it will add unnecessary complexity.
I'm new for apollo-client and I wanted to replace vuex for state management keeping that in mind is there any way I can put my mutations and queries in a centralized way as vuex does? most tutorials and documents I found, call queries and mutations in each component which may cause repetition of queries and mutation so how can I solve this problem?
So, I don't have a ton of Vuex experience, but I have a production app using Vue Apollo, and it's really a different mindset.
Apollo isn't a local store of data, it's a structured way of accessing remote data. It's more a substitute for Axios than for Vuex.
In the case of Apollo, repeating a query isn't a bad thing, because Apollo has a pretty smart caching strategy. You can call queries with fetchPolicy: 'cache-first' to direct Apollo not to refetch already fetched data.
(Now, if data is frequently changing -- such as in a chat app -- you may not want to only rely on cached data. That's a decision you make on a query-by-query basis.)
That said, I would not use Apollo to store local data that is meant to carry from page to page (such as an e-commerce shopping cart). I would stick with Vuex for that.
You should create .js or .ts files with the corresponding query or mutation. Then, if you do not want to store the state in the Apollo Client State Management System, you can just call the corresponding service of state management in Vue.js. I am working with React.js, so what I would use in my case is the Context API, I am sure you can find the same thing for Vue.js.
Check out those links on how to implement Context API similar to React.js:
Context API for Vue.js/Nuxt.js applications
React context-like feature
I currently learning Vue and I am building a movie database app, where users can see movies fetched from an external API and sorted by popular and upcoming.
I have to call different URLs for both categories and I was wondering if I should do that in each component or a separate, third component where all the fetched data is stored?
Does it make sense to use Vuex for a small application like this or is there another best practice? Thanks!
IMHO, Use of Vuex is not about size of application, but the structure. If you want a clean app structure, keep vue SFCs as "simple" as possible. Any logic should be in Vuex and any complex function should be in utility classes.
When you're dealing with an application (not individual components) that utilizes an API, I would recommend placing the API and data hydration into Vuex. (or rather a separate function, but initiated by vuex)
This would allow any component to have access to not only the data, but the loading status of the data. Allowing you (for example) to use something v-if="dataIsLoaded" for components that expect the data to be there, and v-else for loading indicators
There are many resources online and here on stack overflow that will guide you in this. Without knowing how big your application is right now and how big is going to grow, it is difficult to suggest whether to use Vuex or not. In any case, where you make your API calls is / should be independent of your state management.
In general API calls in Vue applications can be made safely in the created lifecycle hook of the component.
created() {}
If you are not going to reuse the data from the API in multiple components, then you can call it in the component where it is needed. If you want to want to do it in a third component, it has to be a kind of wrapper around around your components for popular and upcoming and then pass the data received as a prop to these components.
Approach 1:
MoviesWrapperComponent: Makes the API calls and passes it down to other components
PopularMoviesComponent: Receives data from MoviesWrapperComponent
UpcomingMoviesComponent: Receives data from MoviesWrapperComponent
Approach 2:
PopularMoviesComponent: makes its own API calls.
UpcomingMoviesComponent: Makes its own API calls.
How I do it, is the Ajax calls in each method as in this way it's easier to handle the promisses and the scope of the components.
I'm using the popular Axios plugin, and i'm very happy with it. https://www.npmjs.com/package/vue-axios
I wouldn't use vuex if you just need to share data between a couple of components, but you can use it if you want to learn how to work with vuex.