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

This article introduces the relevant knowledge of "vuex idle state reset scheme". 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!

Preface

For large single-page applications (later referring to spa), we often use the state manager vuex to solve the problems of state sharing and state transfer between components. This application ranges from dozens of single pages to hundreds of single pages. With the frequent switching of routes, there will be more and more states in the vuex corresponding to each route. In order to achieve the ultimate optimization of the page, we need to reset those idle states to reduce the memory footprint.

What state can be reset?

Vuex emphasizes the use of centralized storage to manage the state of all components of the application, but we really put all the state into store, and you will find it very painful to develop. If you want to control which data needs to be managed in store, you must first understand what problems vuex is used to solve. The vuex official website points out that in order to solve the shared state of multiple components, then we can manage the shared state of multiple components in store, where multi-component sharing is cross-routed components in many cases for single-page applications. If store only stores states shared by multiple components, then there is no need to clean up the states in vuex, because these states can be used at any time.

As the business scenario becomes more and more complex, a lot of logic that interacts with the background is put into the components, so the code becomes very messy and the vuex is not fully utilized. At this point, we can put the logic of interacting with the background api to the action in the vuex, and the status returned by the background will naturally be managed by store. After this processing, the component is only responsible for rendering the data, and the logic is very clear. At this time, there will be more and more states in the corresponding store of the component as the route is switched, and these states need to be cleaned up manually.

Many options have trade-offs, if you put the data that interacts with the background api into the component, there is no need to clean it up, but the code logic will become messy. In addition, plug-ins such as vuex vue-devtools will not be able to monitor changes in data per request.

When to reset the status

The effect we want is to reset the state in the vuex corresponding to the previous route during the route switching, but there is no one-to-one correspondence between the route and the vuex. If we want to achieve this effect, we need to maintain a corresponding relationship between the route and the vuex module, which will be very tedious. It is better to reset all the states in the vuex when the route changes.

How to clean up the idle state in vuex

The following will be combined with my github example to illustrate that this example creates a single-page application that clears the idle state by switching routes.

Modify the module status of the corresponding components of the route

In the example, the store is split into multiple module, the component state corresponding to the route is put into the corresponding module, and the state shared by multiple components is managed in the top-level store. It is roughly as follows:

/ / store/index.jsimport page1 from ". / modules/page1.js"; import page2 from ". / modules/page2.js"; import page3 from ". / modules/page3.js"; import page4 from ". / modules/page4.js"; import page5 from ". / modules/page5.js" Export default new Vuex.Store ({state, getters, actions, mutations, modules: {/ / module page1, page2, page3, page4, page5}, plugins: _ _ DEV__? [createLogger ()]: [], strict: _ _ DEV__? True: false})

The state of the module corresponding to the routing page1 looks like this:

/ / store/modules/page1.jsconst state = {/ / list data page1Data: [], / / title data page1Title:''}

This data is returned and copied by calling the backend api. If we reset the data when the route changes, we need to extract the initialization data and expose an identification method initState () that needs to be reset, which means that it needs to be reset when the route changes. Of course, this method name is a convention, and you can also define it as another name. After the transformation is as follows:

/ / store/modules/page1.js// places the data you want to reset const initState = {page1Data: [],} / stateconst state = {/ / parameter deconstruction. InitState, / / Route changes the data that you do not want to reset page1Title:', initState () {return initState}}

Global module configuration

Define global mutation event types

/ / store/types.jsexport const RESET_STATES = 'resetStates'

Define a global mutation

/ / store/mutation.jsimport * as types from'. / types'// detects all state and resets the attributes in `initState () `function resetState (state, moduleState) {const mState = state [moduleState]; if (mState.initState & & typeof mState.initState = 'function') {const initState = mState.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 a global action

/ / store/action.jsimport * as types from'. / types'export default {/ / rest state action resetStates:function (context, payLoad) {context.commit (types.RESET_STATES, payLoad);}}

Route handoff trigger reset method

At this point, all you need to do is to trigger the reset method when the route changes, and handle it in the entry vue file.

/ components/app.vue import {mapState, mapActions} from "vuex" export default {methods: {... mapActions ({resetStates: "resetStates"})}, watch: {$route (to, from) {/ / Route change initiates a reset this.resetStates ();}

If your chrome browser is installed with vuejs-devtools, you can clearly see the reset process of the previous routing data during the route switch.

This is the end of the content of "vuex idle state reset scheme". 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.