Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to achieve vue page state persistence". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Requirements: left tree, right table. After selecting a node in the organization tree, go to the details page and keep it selected when you return. Other query conditions also need to be maintained.

Idea: use vuex combined with localStorage to cache data. When you click the tree node or query button, the data is saved in vuex and stored in localStorage at the same time; when the page rollback, the data stored in localStorage is put into vuex, and the page code is used to determine whether there is data stored by us in vuex. If not, the initial data is defaulted. Clear the cached page data when the page navigation route jumps.

Code:

When you click on a tree node, save the id to vuex. Trigger action through dispatch

This.$store.dispatch ('SetDeviceFaultId', data.id)

In the actions of vuex, trigger the method in mutations through commit

RemoveDeviceFaultId ({commit}) {/ / commit ('REMOVE_DEVICEFAULTID');}, SetDeviceManageId ({commit}, id) {commit (' SET_DEVICEMANAGEID', id);}

Mutations: modifying data

REMOVE_DEVICEFAULTID: (state) = > {state.devicFaultId = null Storage.remove ('devicFaultId');}, SET_DEVICEMANAGEID: (state, deviceManageId) = > {state.deviceManageId = deviceManageId Storage.set (' deviceManageId', deviceManageId);}

State: cached data from localStorage when the page is first created

DevicFaultId: Storage.get ('devicFaultId')

Go to a detail page and roll back

This.params.organizeId = this.$store.state.tree.devicFaultId? This.$store.state.tree.devicFaultId: res.data [0] .id

When clicking on another route, remember to clear the cached data

This.$store.dispatch ('RemoveDeviceFaultId') added:

Storage.js code

After being introduced in vuex, it can be used through Storage.set.

This is the end of the content of "how to achieve vue page state persistence". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.