1. Description of the problem:
Vuex generally need to be placed in, as a global shared data at the time of a successful login user information, menu information. But the data in a page refresh when vuex in the re-initialization, resulting in data loss. Because vuex where the data is stored in running memory, when the page refreshes, the page will reload vue instance, vuex which data will be reassigned.
2. Solution:
Measures one: data vuex are saved directly to the browser cache (sessionStorage, localStorage, cookie)
Option two: request when the page is refreshed again remote data, so that dynamic updates vuex Data
Option three: a request to the background in the parent page remote data, and refresh the page before the data is first saved to vuex sessionStorage (in case the requested data is returned when the data is too large can not get the page to load)
Analysis: The
way a drawback is unsafe, do not apply a large amount of data storage;
The second method is suitable for small amounts of data, and the network will not be delayed;
Option three is to talk about the focus, approach two and a way to use together.
3, resolution process:
3.1, select the appropriate browser stores
localStorage - at local, unless you take the initiative to delete permanently stored;
sessionStorage - is stored in the current page is closed up, and the other tab pages not related;
the cookie - is stored according to the effective time you set , but the drawback is not easy to read and store large data, and the background will interact.
The method of choice is sessionStorage present, the reason is due to the selected application vue single page, the page jumping operation is executed in a route, another reason is to ensure sessionStorage sessionStorage data page is opened is empty, and if it is it will localStorage read the last page of open data.
3.2, the solution
due to the state where the data is responsive, so sessionStorage storage must follow the changes, and the value can only be changed by the state of mutations.
First, after the user login is successful, then the user information, menu information distributed through actions to save vuex in. Then calculating vuex menu page in a menu state data, parses the data into the format required by the front end of the assembly components, and then render component generated menu tree. If the page does not refresh, everything is fine.
After a successful login and user data synchronization to vuex menu
in the menu page menu vuex monitor data
solutions refresh the page:
Page refresh when the asynchronous request background information and then dynamically update data vuex, where there is a situation, network delay, a large quantity of data problems. At this point and before vuex get back to the data returned, the page has finished loading, and this will result in data loss. So the solution is, listening to refresh the browser before the event, put the data in to save vuex sessionStorage before the browser refresh, refresh after a successful asynchronous request if data is not returned directly in the data acquisition sessionStorage, otherwise acquire vuex in the data. (Only not take to refresh the background data, will be taken from sessionStorage years. Ensure data security, even if acquired in sessionStorage data is safe, because each refresh will be reassigned, without fear of tampering with the data, and secondly, sessionStorage is to do in the data encryption)
Request data from the parent page in the background, and monitor refresh the browser before the event, the data will be saved vuex sessionStorage to
request data from the parent page in the background, the returned data distributed to vuex
