首发于: https://lonhon.top
最近遇到的一个场景,因为项目的权限系统+路由控制中用到了vuex存储全局数据,在登出时须要将全部数据进行重置or清空。javascript
好比 store.state.username初始为'' => 登录后变成'张三' => 登出后仍是'张三',此时须要置为''.vue
actions.resetVuex = function() { store.commit(state.a, null) store.commit(state.b, null) store.commit(state.c, null) ... } store.dispatch('resetVuex')
一开始的想法是建立一个action实现vuex重置,在登出时调用该放方法便可。java
** 可是 ** 这种方法须要手动维护,并且一个个写上去感受太low了,随后又想到能够经过遍历store.state进行全部重置,可是这种方法有一个弊端就是若是重置的值有不一样的初始值的话,赋值的时候就很麻烦了。vuex
总之,上面的方法和搜索出来的方法都不尽人意,可是迫于无奈就先用着第一种了。session
就在上述方法写到一半的时候突然灵光一闪,我特么以前为了store的数据持久化不被页面F5重置还专门把数据放在SessionStorage这些本地存储里,如今一个个去重置感受像个睿智,** 在登出的时候刷新页面就能达到store重置的效果了 **。this
经过页面重载方法window.location.reload()能够手动刷新页面,下面上完善流程代码:spa
// 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方法,会出现页面连续刷新的问题:登陆页面加载到一半,内容已经显示的状况下会再次刷新,这种体验确定要被产品怼差评。code
因此此处用到两个方法来解决两次刷新的问题router
最后,一个简单的reload方法就完成了vuex的重置。ip