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.
Related
I basically made a login page which could grab user/password from the text input, but if I want to use these to get auth from my website which has a REST API, where should I start it, is any lib that I can use?
I don't know how deeply you want to make. So I'll guess your concerning.
If you want to just send and get response from server
You can use fetch() method in js. Luckily react-native have documentation. https://reactnative.dev/docs/network Look this documents. React-Native have own fetch method for communicating with server.
If you want to manage state of your client-side data
Redux : You might probably hear this one. you can include redux in your package. we can use redux in react-natvie not only react. I just googled articles. https://www.digitalocean.com/community/tutorials/react-react-native-redux
MobX : Redux is pretty much complicate way to deal with state. So If you need simple things. you can try MobX. try this one. (also googled) https://www.smashingmagazine.com/2020/08/mobx-state-manager-react-native-applications/
Hope this idea helps you.
Best regards.
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.
I want to get my data from server in the component where the data is needed.
(call api at mounted or beforemounted or created (component lifecycle loop))
If I followed the rule above, it is inevitable to call same multiple REST api at same page.
I tried to cache them but it is quite difficult to handle the REST api result.
( Because the result of REST api depends on to params and it also depends on to time....)
I know that nuxt provide fetch and async but getting all data at page level looks bad.
Is there any good strategy for call api efficiently? I think this kinds of concern is not restricted to nuxt or vue, it also happens in react, angualr like component based framework...
If you want an SSR page than you can make API requests in the asyncData method inside pages or if you want to make API requests on client-side than you can go for mounted method.
And for state management/managing data in component/across component can be achieved via VueX
You can use nuxtServerInit to store in vuex
Check out the documentation
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.