Store (Pinia) Vs UseState
If I am not mistaken, useState can replace any store like Pinia? Given that useState makes ref sharable across all components I have a hard time knowing if I should use a store or a useState ref. For instance, let's say I have a currentUser (firstName, lastName, email) that I fetch from a distant API at page loading. Should I stock this information in a Pinia userStore or in a useState('currentUser')?
What are best practices on this topic?
useState() docs:
https://v3.nuxtjs.org/api/composables/use-state
Pinia docs:
https://pinia.vuejs.org/core-concepts/
This question is pretty much fully explained in the Why should I use Pinia section, I quote:
Devtools support
A timeline to track actions, mutations
Stores appear in components where they are used
Time travel and easier debugging
Hot module replacement
Modify your stores without reloading your page
Keep any existing state while developing
Plugins: extend Pinia features with plugins
Proper TypeScript support or autocompletion for JS users
Server Side Rendering Support
Here is a video of Evan You explaining it if you prefer.
Related
I want to build an app where users can jointly work on lists. The app should be avialable offline and sync changes when it goes online again.
For the app iteself, I've decided to go with Ionic Vue. For storage, I created a Firestore and was able to sync between my app and Firestore by using the Firesotre method onSnapshot() (doc). Although this working at the moment, the resulting code does not look very elegant and I have to create multiple very similar Firebase calls in different components. This slows the app down and (I think) also prevents me from making the lists available offline and sync them again when there is a connection.
I recently discovered vuex and the idea sounds quite fitting for my case: I store all app data in the vuex store and sync it (both ways) to Firestore. My components access the vuex store instead of the Firestore directly. Here are some questions regarding this idea:
Is this in general how the vuex store and Firestore are supposed to be used?
Can I make the vuex store data available on my phone and only sync it to the Firestore whenever there is a connection (to make the app available offline inlc. modifying data)?
If so, what is the easiest way to sync the vuex store to Firestore?
Regarding the syncing: I found Vuexfire, but it does not really work for me as expected - I guess this is because it is built on Vue 2 (as against Ionic which is built on Vue 3). I also found Vuex Easy Firestore, but I'm a bit reluctant to try new tools, as Vuexfire cost me several hours.
Thanks for reviewing my implementation ideas!
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.
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.