How to reset all states by vuex (customizable)

In formal scenarios, we often encounter a problem, that is, when logging out the page or other operations, we need to reset all vuexes to make them initially.
Then, there are many methods involved:

1. Page refresh:

()

This method is optimized by routing judgment or logic optimization, and always reloads the page, which will lead to a poor user experience, which is also an unnecessary burden for the browser, so I gave up after trying.

2. Write a reset method and then call it

 = function() {
  (, null)
  (, null)
  (, null)
  ...
}

('resetVuex')

This will appear multiple modules and multiple states, which require manual addition, which is huge and difficult to maintain. Moreover, if the state is initially an array, an object is even more difficult to operate. At most, we can copy one copy at the beginning, but we also need to operate and encapsulate each module.

These two methods can solve the problem, but I still haven't adopted these two methods because I feel that something has been sacrificed to achieve my goal. Through my repeated practice and exploration, I took the following methods:

First, the page is loaded. When the store is first loaded, all the states of the store must be the initial value, so I will make a local cache record:
Here I used the store plugin (reference method/nbubna/store）

Before creating a vue instance:

import _store from 'store'
import createStore from './store'
...

const store = createStore() //I created the vuex library_store({ initState:  }) //Cache an initial state called initState

We know that it is executed once when the page is loaded, so the cached initState is the state state in the store that was created at the beginning.
(Includes all states in the module);

Then we write a mutation method globally created in the store

Here I used the store plugin (reference method/nbubna/store）

Here I used the lodash plugin (reference method/）

import _ from 'lodash'
import _store from 'store2'
...

const store = new ({
  state: {
   token: ''
  },
  mutations: {
   resetAllState (state, payload) {
    if (payload instanceof Array === false) { // Verify that the incoming is an array     return
    }
    
    const initState = _store('initState') // Get out the cache of the initial value    const _initState =  ? _.omit(initState, payload) : initState // Determine whether there is data in the incoming value, and eliminate the corresponding value if there is data    
    _.extend(state, _initState)
   }
  },
  modules: {
   ...
  }
  }）

This mutation method called resetAllState refers to replacing the global state with our cached state.

Why is payload an array here?

Because this is what the title describes as customizable. If most of the states are reset in the page, but some of them need to be retained, we can remove the corresponding state through the state value we pass it so that it will not be updated.

Of course, we can also pass in values ​​to update the corresponding values, and all other values ​​will not be updated (we will not explain in detail here)

The above is the method I have thought about in practice. There may be some shortcomings. Everyone is welcome to ask questions, communicate or make better suggestions. I also hope everyone supports me.