2024年最全vue项目退出登录清除 store 数据_vue删除token怎么删(1)，前端平台HTTPS抓包解决方案及问题分析

本文链接：https://blog.csdn.net/2401_84619986/article/details/138520348

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

js基础.PNG

前16.PNG

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

```

然后使用的时候调用： 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()
 
const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
}
 
 logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },


#### react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

![](https://img-blog.csdnimg.cn/img_convert/feb3e4aedc49e2c0a0ba61e755313c02.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/a63a4b367d048b02e4df7544a1e3cb57.webp?x-oss-process=image/format,png)

总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-oulYdWIt-1715045931629)]

[外链图片转存中...(img-k1YtZSmr-1715045931630)]