摘要：
所以此处用到两个方法来解决两次刷新的问题登录页面中template使用v-if控制显示根据store是否有数据判断是否重置，如果数据还有值，则reload()，此时因为isReload的默认值为false，所以登录页面在刷新前不会显示任何内容。刷新后，将isRolad赋值为true从而显示页面内容。最后，一个简单的reload方法就完成了vuex的重置。
首发于： https://lonhon.top
最近遇到的一个场景，由于项目的权限系统+路由控制中用到了vuex存储全局数据，在登出时需要将所有数据进行重置or清空。
比如 store.state.username初始为'' => 登陆后变成'张三' => 登出后还是'张三'，此时需要置为''.
解决方法0.1
actions.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()可以手动刷新页面，下面上完善流程代码:
// 1.登出方法
logout() {
window.localStorage.clear()
window.sessionStorage.clear()
clearCookie()
this.$router.push({ name: 'Login' })
}
// 2.登录页面 / js部分
data() {
return {
isReload: false // 默认不显示页面内容
}
},
created() {
if (this.$store.getters.addRouters.length > 0) { // 判断是否已经刷新
return window.location.reload()
}
// 正式显示页面内容
this.isReload = true
}
// 3.登录页面 / template部分
<template>
<div v-if="isRolad">
...
</div>
</template>
注意，在登录页面的created钩子中，如果直接进行reload方法，会出现页面连续刷新的问题:登录页面加载到一半，内容已经显示的情况下会再次刷新，这种体验肯定要被产品怼差评。
所以此处用到两个方法来解决两次刷新的问题
- 登录页面中template使用v-if控制显示
- 根据store是否有数据判断是否重置，如果数据还有值，则reload()，此时因为isReload的默认值为false，所以登录页面在刷新前不会显示任何内容。刷新后，将isRolad赋值为true从而显示页面内容。
最后，一个简单的reload方法就完成了vuex的重置。