---

vuex is state management, with emphasis on management, not storage. LocalStorage only has the function of reading and writing data, but there is no management function. If you use it as a single read, you need to write and manage it yourself. There is no conflict when the two are used together.

Don't confuse the two, they are completely different things. One is the state management library, and the other is the API of the read and write data provided to you by the browser.

---

if the data is transferred to the backend and used by different components, you can get the data from the backend, but the network request overhead is relatively high, and if the parent-child components communicate, you can directly emit on or props, while multi-layer nested components communication requires a solution like vuex, and the common data is hosted in the state. Different components can get this data

---

localStorage. Will your component data change if the content changes? This is its disadvantage.
you can also use onstorage to listen, but keep writing in this way, and you will find that you have created a state manager.
in the final analysis, one is the data container and the other is the data manager.

---

you localstorage save a function and show it to me

---

one is state management , and the other is data local storage , which does not conflict with each other and can complement each other. I also admire your strange brain circuit when you compare two irrelevant things together.

if you use vuex , it acts as a centralized data cache, which is a bit of a killer.

if you use keep-alive to make multiple pages live together, and a data object will be displayed in N components of multiple pages at the same time, and there is a need to add, delete, modify and search, and keep the state unique, you will realize that it is good to let vuex be managed centrally. If you stress that each component implements the logic of adding, deleting, changing and searching, and the data is updated, push messages to each component to update them one by one, of course. No technology stack has ever been irreplaceable, mostly just to make it easier to implement certain requirements and functions

---

cannot.
1. Responsive also uses vuex
2.localStorage for local persistent data storage, which have different functions.
3. More often you need a combination of the two, rather than substituting one for the other.

---

function is different, depending on what your requirements are. If you just use vuex as a storage container, then you can.
but the bigger role of vuex is to manage. Do you want to write by hand?

---

can , after all, we have passed the era without vueX.
vuex brings more convenience. For example, vueX can simply implement data monitoring, write and repeat the wheel

---

locastorage ? Stupefied for a moment, I thought it was a new library.
substitutes localStorage for vuex , which is functionally feasible. Before
learned to use vuex , I replaced vuex with sessionStorage .
of course, the disadvantages are obvious. sessionStorage can only read and write simple data . When reading and writing data between different components and doing data conversion, you need to write the same code for each read and write operation .
in order to save this repetitive workload, I write the processing of reading and writing data as a global function , so that is easy to use , and the function can be implemented.
but as the requirements change, needs to interact with more and more data , all written as global functions, which is obviously not suitable. A separate module of is needed to manage these data read and write operations.
think about it, or take some time to learn vuex

---

information preservation vuex+locastorage is better to use, state take from locastorage, action save the way to locastorage also saved, so that the information is saved, even if the page jump + refresh data is also available, and can also do A page saved information has changed, to the B page data is also changed.

---

these are two completely different concepts

first of all, vuex is a state management library for vue (besides managing data state, it can also manage the operation of reading and writing data mutation), while localStorage is only an api, provided by a browser in terms of state management, it only plays the role of persistent storage of data, as for the operation of managing read and write data, it does not exist.

and, vuex data is stored in memory, page refresh will be lost, while localstorage is stored locally on the computer, refresh will not be lost

= give a chestnut to let the subject understand vuex =

if your whole project is a hotel, this hotel can use raw materials ( data ) and kitchenware ( function ) to make all kinds of delicious dishes ( processed data, ), each .vue file. All kinds of data and function ,

can be stacked.

then vuex is the hotel's central warehouse, storing raw materials ( state ) and kitchen utensils ( mutation ) .

= give a chestnut to give the subject an in-depth understanding of the application of localStorage in vuex =

for example, the user information you mentioned userInfo is placed in the state attribute of the entire single object tree in vuex . There are two ways to write and manage this userInfo mutation :

Plan 1:

do not use localStorage . Every time the page uses userInfo , it gets

directly from the api server by sending a request.

Plan 2:

use localStorage . First declare a getUserInfoFromAPIsaveToLocalStorage () method that calls api to pull user information locally and store it in localstorage. When you want to use userInfo , call the getUserInfoFronLocalStorage () method

that reads user information from the local localstorage.

in vuex, getUserInfoFromAPIsaveToLocalStorage () and getUserInfoFronLocalStorage () these two function are placed in the mutation attribute

.

---

can raise this problem, generally encountered refresh data loss, this situation is generally only login information, other does not exist, this is a single page

---

data is not responsive and some functions can not be replaced