2024年Web前端最新vue项目退出登录清除 store 数据_vue删除token怎么删(2)，面试前端工程师会问到那些问题

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<template>
    <router-view v-if="isRouterAlive"/>     //路由的组件
</template>
<script>
export default {
 data () {
   return {
     isRouterAlive: true
   }
 },
 methods: {
   reload () {
     this.isRouterAlive = false
     this.$nextTick(() => (this.isRouterAlive = true))
   }   
 }
}
</script>

然后使用的时候调用： this.reload() 方法

**方法三 😗*vuex清除token (不会出现白屏,推荐使用)

vuex清除token

由于项目中需要一个用户登出的功能，而数据放在Vuex中在登出没有刷新时数据并不会更新
所以找到了这样一个很不错的方法

将state以各种方式保存
注册时调用函数赋值
清空时再将保存的state赋值替换当前的state
over
1. 首先默认state时要用新的方法注册
把数据写在函数的返回值中（其他方法也可以只要能调用）

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    permList:[]
  }
}

2. 给Vuex中的state赋值并注册

const state = getDefaultState();

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    state,
    permissions
  },
  getters
})

3. 在mutations中定义方法

  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },

4. 页面中使用

    commit('RESET_STATE');

5. 全部完整代码如下：

 
const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}
 
const state = getDefaultState()


### 总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/ef336fc6eeb8c79b1e96f97e168df90a.png)

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/d3ac9c078e3063bbc4ddc4fe929112c8.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/04656be82d9b13ba32131bdc8ec55836.png)