Kinda OT! I have little experience in web front-ends, I am a server/side girl> perhaps I am an old schooler from the CORBA TIBCO-Rendezvous ICE era, but why use VUEX to keep the data/state in the browser when you may be better of maintaining the state/data in the server through AJAX or axios calls and let components/subcomponents who want data "real-time" listen (subscribe) to data in the server though websockets? Or is VUEX supposed to be a layer between components and server, thus having no actual data stored in the browser.
You're sort of correct about Vuex sitting between the browser and server, although the specific way an app uses it depends on the app's design. But as a simple answer: Vuex does not store persistent state, it is only storing runtime state. So if you pull data from a server, you can put it in Vuex as a very easy way for the components in your application to access it. If you need components to communicate with each other, these sorts of things can also go through Vuex. A very simple example is a global variable for "menu open vs closed" stored in Vuex. The menu button can update this variable, and anything in the app that needs to respond to the variable changes can do so.
The topic of why to use Vuex (or any flux system, such as redux or mobx) is a complicated one, so I'd encourage you to read the Vuex docs and various blogs about it. The docs have some examples that will likely help shine some light on how Vuex is used.
This question opens a lot of interesting perspectives.
Today it sounds naive, but it's good to recall certain things... and also reconsider some aspects.
In short, communication with the server is slow. I can spend a millisecond to store some data in the browser, but at best it's 20 to store them in the server. But it could be 200, depending on the size of the data... Or 2000 or worse if the connection is flaky.
This could lead to a very bad user experience.
So, you could store your state data in the server, but it's preferable if you do that as a backup: nice to have, because you could restore the session even from a different browser, but not fundamental, as the application is usable offline too.
This is sort of an interesting take, and I think it's addressing a different type of data than my other comment. UI state data should be stored locally, in Vuex or through some other means. However, application data (e.g. the contacts in a contact app, the documents in a note-taking app, etc.) need persistent storage that is maintained between page loads. If you refresh the page, your Vuex state is gone. It starts from scratch Everytime the Vue app is bootstrapped.
The most common way of persisting data is to use a backend that takes care of storage, which also has the benefit of allowing access to that data from multiple places. If you don't want to use a server, there are options such as localstorage, sessionstorage, IndexdDB, and more that will keep your data local. But it's important to note that these options and the server option are not for UI state, they are for long-lived data. In all of these situations, Vuex is loading this long-term data from somewhere else, even if not a server.
Vuex itself is not a database or a persistent data Storage layer, but it can be a good place to store UI state and a helpful place to cache your persistent data.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Kinda OT! I have little experience in web front-ends, I am a server/side girl> perhaps I am an old schooler from the CORBA TIBCO-Rendezvous ICE era, but why use VUEX to keep the data/state in the browser when you may be better of maintaining the state/data in the server through AJAX or axios calls and let components/subcomponents who want data "real-time" listen (subscribe) to data in the server though websockets? Or is VUEX supposed to be a layer between components and server, thus having no actual data stored in the browser.
You're sort of correct about Vuex sitting between the browser and server, although the specific way an app uses it depends on the app's design. But as a simple answer: Vuex does not store persistent state, it is only storing runtime state. So if you pull data from a server, you can put it in Vuex as a very easy way for the components in your application to access it. If you need components to communicate with each other, these sorts of things can also go through Vuex. A very simple example is a global variable for "menu open vs closed" stored in Vuex. The menu button can update this variable, and anything in the app that needs to respond to the variable changes can do so.
The topic of why to use Vuex (or any flux system, such as redux or mobx) is a complicated one, so I'd encourage you to read the Vuex docs and various blogs about it. The docs have some examples that will likely help shine some light on how Vuex is used.
This question opens a lot of interesting perspectives.
Today it sounds naive, but it's good to recall certain things... and also reconsider some aspects.
In short, communication with the server is slow. I can spend a millisecond to store some data in the browser, but at best it's 20 to store them in the server. But it could be 200, depending on the size of the data... Or 2000 or worse if the connection is flaky.
This could lead to a very bad user experience.
So, you could store your state data in the server, but it's preferable if you do that as a backup: nice to have, because you could restore the session even from a different browser, but not fundamental, as the application is usable offline too.
This is sort of an interesting take, and I think it's addressing a different type of data than my other comment. UI state data should be stored locally, in Vuex or through some other means. However, application data (e.g. the contacts in a contact app, the documents in a note-taking app, etc.) need persistent storage that is maintained between page loads. If you refresh the page, your Vuex state is gone. It starts from scratch Everytime the Vue app is bootstrapped.
The most common way of persisting data is to use a backend that takes care of storage, which also has the benefit of allowing access to that data from multiple places. If you don't want to use a server, there are options such as localstorage, sessionstorage, IndexdDB, and more that will keep your data local. But it's important to note that these options and the server option are not for UI state, they are for long-lived data. In all of these situations, Vuex is loading this long-term data from somewhere else, even if not a server.
Vuex itself is not a database or a persistent data Storage layer, but it can be a good place to store UI state and a helpful place to cache your persistent data.