first of all, distinguish the difference between vuex and browser cache.

vuex is designed to store data in a object tree variable. Our application (vue application) takes data from this variable and supplies it for use. When the current page is closed, the variables in vuex will disappear and reopen the page, and need to be regenerated.
however, browser cache (cookie,localstorage, etc.) stores data somewhere in the browser, closes the page, and does not automatically empty the data. When you open the page again, you can still get the data that existed in the browser (cookie,localstorage, etc.).
whether to use vuex or browser cache depends on the specific business scenario. For example, token verified by the user can exist in cookie , because the user can use it when logging in again. For example, user's permission data , these have certain security considerations, and different users have different permissions, so it is more reasonable to put them in vuex . When a user exits, it will be destroyed automatically.

secondly, state in vuex is one-way, or it can be operated asynchronously, and there is no conflict between the two.

state in vuex is designed to ensure data consistency and continuity, while values in state can only initiate commit through action , and then change the values in state .
in action , whether it is Synchronize or asynchronous is one-way to change the value in state .

Let's put it this way. If I save the cache, I can easily change it for you, and I can easily know what you have saved. If you vuex, it will not be so easy.

another thing is that if the cache is refreshed, the browser cache will not be reset, and the vuex will be reset

the cache is stored on disk, and the objects stored in vuex are