Preface
For large single-page applications (sustaining to spa), we often solve problems such as state sharing and state transfer among components by using the state manager vuex. This kind of application ranges from dozens of single pages to hundreds of single pages. With frequent switching of routes, more and more states in the corresponding vuex for each route will be. In order to achieve the ultimate optimization of the page, we need to reset those idle states to reduce the memory space occupied.
What state can be reset
vuex emphasizes the state of all components of the application using centralized storage, but if we really put all the state into the store, you will find it very painful to develop. If you want to control which data needs to be managed in the store, you must first understand what problems vuex is used to solve. The official website of vuex pointed out that it is to solve the shared state of multiple components, so we can put the shared state of multiple components into the store to manage. The multi-component sharing here is a cross-routed component for single-page applications. If the store only stores states shared by multiple components, then there is no need for us to clean up the states in vuex, because these states will be used at any time.
As the business scenario becomes more and more complex, a lot of the logic of interaction with the background is put into the components, so the code becomes very messy and vuex is not fully utilized. At this time, we can put the logic of interacting with the background API into the action in vuex to process, and the status returned in the background will naturally be placed in the store management. After this processing, the component is only responsible for rendering the data, and the logic is very clear. At this time, the statuses in the corresponding store of the component will be more and more as the route is switched, and these statuses need to be manually cleaned.
Many solutions have trade-offs. If you put the data interacting with the background API into the component, there is no need to clean it up, but the code logic will become more messy. Also plugins such as vuexvue-devtools Changes in each requested data will not be monitored...
When to reset the status
The effect we want is to reset the status in the vuex corresponding to the previous route during route switching, but the route and vuex have no one-to-one relationship. If we want to achieve this effect, we need to maintain the corresponding relationship between a route and the vuex module, which will be very cumbersome. It is better to reset all states in vuex when the route changes.
How to clean up idle state in vuex
The following will be combinedMy github instanceTo illustrate, this example creates a single page application, and we clear the idle state by switching routes.
Reconstruct the module status of the corresponding component of the routing
In the example, the store is split into multiple modules, and the corresponding component state of the route is placed into the corresponding module, and the state shared by multiple components is placed into the top-level store to manage. It is roughly as follows:
// store/
import page1 from "./modules/";
import page2 from "./modules/";
import page3 from "./modules/";
import page4 from "./modules/";
import page5 from "./modules/";
export default new ({
state,
getters,
actions,
mutations,
modules: { // The corresponding module of each route page1,
page2,
page3,
page4,
page5
},
plugins: __DEV__ ? [createLogger()] : [],
strict: __DEV__ ? true : false
});
The state of the module corresponding to routing page1 is as follows:
// store/modules/
const state = {
// List data page1Data: [],
// Title data page1Title: ''
}
These data are returned and copied by calling the backend API. If we reset these data when the route changes, we need to extract the initialized data and expose a identification method that needs to be reset. This means that the route changes need to be reset. Of course, this method name is a convention, and you can also define it as another name. After the transformation is:
// store/modules/
// Place the data you want to resetconst initState = {
page1Data: [],
}
// state
const state = {
// Parameter destruction ...initState,
// Change the data you don't want to reset page1Title: '',
initState(){
return initState
}
}
Global module configuration
Define global mutation event type
// store/ export const RESET_STATES = 'resetStates'
Define global mutation
// store/
import * as types from './types'
// Detect all states and reset the properties in `initState()`function resetState(state, moduleState) {
const mState = state[moduleState];
if ( && typeof === 'function') {
const initState = ();
for (const key in initState) {
mState[key] = initState[key];
}
}
}
export default {
[types.RESET_STATES](state, payload) {
for (const moduleState in state) {
resetState(state, moduleState);
}
},
}
Define global action
// store/
import * as types from './types'
export default {
// rest state action
resetStates:function (context, payLoad) {
(types.RESET_STATES, payLoad);
}
}
Router switch trigger reset method
At this point, everything is ready. You only need to trigger the reset method when the route changes, and process it in the entry vue file.
// components/
<script>
import {mapState, mapActions} from "vuex"
export default{
methods: {
...mapActions({
resetStates: "resetStates"
})
},
watch: {
$route(to, from) {
// Reset the route change ();
}
}
}
</script>
If your Chrome browser has vuejs-devtools installed, you can clearly see the reset process of the previous route data when switching routes.
Summarize
Click here for example. The vuex state reset here is to traverse all the states in the store each time the route switches and reset the properties in initState(). It would be better if the state corresponding to the current route can be reset, but the route has no association with the module in the store. Here is just a solution to reset the vuex status. If there is a better solution, please leave a message to the readers. If there is any inappropriateness, please leave a message.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.