I'm using Vuex to store external data from an API. This is data which can also be changed by others, so it might lead to a situation where I've stored outdated data. I'm looking for a way to somehow detect if the data has changed, so that I know if a new request should be made.
Is this possible with Vuex, or should I be looking at some other technique?
Related
I have a basic composition function which pulls in data from an api.
This is fine there are lots of good examples
https://vueschool.io/articles/vuejs-tutorials/state-management-with-composition-api/
I can share state between pages but refreshing any page resets my data. Is there a standard or good practice way to handle this? I use vuexpersist with vuex to solve this.
Are people just writing manually to localstorage?
If you refresh or reload, the "state" is expected to be missing since you are loading the app again. If you need data persistency then manually writing to local storage is the common action (so that is a yes for your last question).
You need to manually write the state recovery for your app, could it be by restoring data from local storage, retrieving data again from the API or even restoring the user session if you need authentication.
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 am using vue.js and vuex.
I am storing if user has shared the product on facebook and if yes, let him buy it on a lower price than original. I am storing if he has shared or not on my database and prices are also stored on my db.
When user accesses any of the main pages, i make an api call and load that information in store. Then on checkout page i check that information in vuex store. As i dont want user to go to my vuex store and change that information directly because he would buy the product with a low price without sharing.
Is it possible to change store data from browser or any other ways other than my code ?
I find it unethical.
Hopefully if your information isn't validated by the back-end, there's no way ensuring if some piece of data on front-end is not manipulated. So simply - user can always fake it. However, most of the users will never open devTools and therefore will not know how to manipulate it.
Appendix: when encounter such swindling I usually just share the post with visibility restricted to myself only. So far it have always worked. So, even if one shares it, is it really shared? 🤔
Wish you success
After authentication and authorization steps I get some data of the logged-in user and put it to the Vuex.
It is handy to access this mostly used variables, but what if changes something of the data on API side? The data is feed by another resources/websites. So, there is always a possibility of change.
Furthermore, I have multiple calls that have a different type of user data.
I do the same call after each hard page refresh and rewrite the Vuex data.
Does it make sense? Is there a better way to achieve my goal?
Regards.
I'm working on a web application which consists of various pages that rely on ajax calls (via AXIOS) for either fetching data from the server or communicating data back to the server. However, the data that is fetched from the server is 99% of times intact during the lifecycle of a session meaning that it will not be changed (i.e. only displayed to user while involving very low update frequency). Moreover, this data, is just pure text including links to contents, formatted as a JSON Object.
I have just found about Vuex, and I have been thinking about packing all these get Ajax requests scattered across different components and centralize them in a Vuex Store in a way that, when the application loads, all required data would be fetched from the server so that no more communication with the server to get such data during the lifecycle of the session would be needed (while only getting the contents such as images, audio, etc via links).
Is Vuex appropriate for this purpose? Is this a good idea at all (based on the concept of speeding up navigations)?
As mentioned in the comments, Vuex is meant to manage complexity and in your case you are planning to fetch 99% of the data at the beginning for your app. So, in client-server aspect, you totally don't need it. Keeping your data structured would be enough.
However, you have also the notion mutation in Vuex. The idea is that you can update the core data only using mutations. In this way, you are protected from unwanted changes and you have a better insight how/in which order your data is changing. So, if you have complex operations on your data (fetched from server and also your apps logic), Vuex would be a good choice.
There are also another interesting features for different kind of apps. Note that is just another trending way to keep your data structured. There are also another strategies but since Vuex is regularly maintained by Vue core team (and it seems to be also in the future), I would suggest it. Especially, if your app keep growing, you will love it more and more. After reading core concepts of Vuex (or better its logic behind Vuex: FLUX), you will have better insight about it.