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

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

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

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