本文介绍了在Vue项目中，如何优雅地清空vuex中的数据。作者在权限管理和路由控制中遇到需要在登出时重置全局数据的问题。尝试了手动重置和遍历state的方法，但都存在不足。最终找到了一个简洁的解决方案：在登出时利用window.location.reload()刷新页面，结合localStorage和sessionStorage的清除，实现页面重载和store数据的重置。同时，为了避免登录页面因重载导致的连续刷新问题，通过v-if和isReload变量控制页面显示。
首发于： https://lonhon.top
最近遇到的一个场景，由于项目的权限系统+路由控制中用到了vuex存储全局数据，在登出时需要将所有数据进行重置or清空。
比如 store.state.username初始为'' => 登陆后变成'张三' => 登出后还是'张三'，此时需要置为''.
解决方法0.1actions.resetVuex = function() {
store.commit(state.a, null)
store.commit(state.b, null)
store.commit(state.c, null)
...
}
store.dispatch('resetVuex')
一开始的想法是创建一个action实现vuex重置，在登出时调用该放方法即可。
但是 这种方法需要手动维护，而且一个个写上去感觉太low了，随后又想到可以通过遍历store.state进行所有重置，但是这种方法有一个弊端就是如果重置的值有不同的初始值的话，赋值的时候就很麻烦了。
总之，上面的方法和搜索出来的方法都不尽人意，但是迫于无奈就先用着第一种了。
解决方法1.0
就在上述方法写到一半的时候忽然灵光一闪，我特么之前为了store的数据持久化不被页面F5重置还专门把数据放在SessionStorage这些本地存储里，现在一个个去重置感觉像个睿智，在登出的时候刷新页面就能达到store重置的效果了。
通过页面重载方法window.location.reload()可以手动刷新页面，下面上
最低0.47元/天 解锁文章
扫一扫
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
