vuex重置所有state(可定制)

灰太狼 2022-03-26 14:24 291阅读 0赞

在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，  
那么，就涉及到了多种方法：  
1、页面刷新：

window.location.reload()

这个方法通过路由判断优化或是逻辑优化，始终页面时重新加载，就会导致用户体验很差，对浏览器来说也是一种不必要的负担，  
所以我尝试之后就放弃了。

2、写一个重置的方法然后调取

actions.resetVuex = function() {
        store.commit(state.a, null)
        store.commit(state.b, null)
        store.commit(state.c, null)
        ...
    }
    
    store.dispatch('resetVuex')

这样又会出现多个module，多个state，需要手动添加多个，工作量巨大且不易维护，而且如果我们state初始是个个数组，一个对象这些更不好操作，更优最多就是我们初始的时候深拷贝一份，但是也需要每个module里进行操作和封装

这两种方法是可以解决问题的，但是我还是没有采用这两种方式，因为感觉已经牺牲了某些东西来达成目的了，通过我反复的实践，和摸索我采取了以下方法：

首先页面加载，第一次加载引入store的时候，store的所有state肯定是初始值，那么我就做一个本地缓存记录下来：  
这里我采用了store插件（引用方式参考 [https://github.com/nbubna/store][https_github.com_nbubna_store]）

在main.js创建vue实例之前：

import _store from 'store'
    import createStore from './store'
    ...
    
    const store = createStore() //我创建好的 vuex库
    _store({ initState: store.state })  //缓存一个名为initState的初始状态

我们知道main.js是页面载入的时候执行一次的那么缓存的initState就是自己最开始创建store里的state状态  
(包含了module里的所有state)；

然后我们在store创建的全局写一个mutation方法  
这里我采用了store插件（引用方式参考 [https://github.com/nbubna/store][https_github.com_nbubna_store]）  
这里我采用了lodash插件（引用方式参考 [https://www.lodashjs.com/][https_www.lodashjs.com]）

import _ from 'lodash'
    import _store from 'store2'
    ...
    
    const store = new Vuex.Store({
        state: {
          token: ''
        },
        mutations: {
          resetAllState (state, payload) {
            if (payload instanceof Array === false) { // 验证传入的是一个数组
              return
            }
            
            const initState  = _store('initState') // 取出初始值的缓存
            const _initState = payload.length ? _.omit(initState, payload) : initState // 判断传入值有无数据，有数据剔除相对应的值
            
            _.extend(state, _initState)
          }
        },
        modules: {
         ...
        }
        }）

这个名叫resetAllState的mutation方法里就是讲全局的state替换成我们缓存的state。  
这里为什么 payload 是一个数组呢？  
因为这就是标题所描述的可定制，如果页面内重置绝大部分状态，但需要保留其中一些状态的时候我们可以通过我们传递过来的state值来剔除相应的state，使其不被更新。  
当然我们也可以传入值来更新相应值，其他所有值不进行更新（这里我们就不详细说明）

以上，就是我实践思考出来的方法，可能有不足的地方，欢迎大家提问、交流或提出更好的建议。谢谢

来源：[https://segmentfault.com/a/1190000017924217][https_segmentfault.com_a_1190000017924217]

[https_github.com_nbubna_store]: https://github.com/nbubna/store
[https_www.lodashjs.com]: https://www.lodashjs.com/
[https_segmentfault.com_a_1190000017924217]: https://segmentfault.com/a/1190000017924217