快捷導(dǎo)航

vue項(xiàng)目退出登錄清除store數(shù)據(jù)的三種方法

更新時(shí)間：2022年09月22日 09:35:44 作者：IT博客技術(shù)分享

最近使用vue做用戶的登錄/退出,在開(kāi)發(fā)過(guò)程中遇到的一些問(wèn)題,記錄下來(lái),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目退出登錄清除store數(shù)據(jù)的三種方法,需要的朋友可以參考下

方法一：（不友好，頁(yè)面會(huì)白屏，不推薦使用）

在退出登錄的loginOut 方法里面:

window.location.reload()

方法二 : (不會(huì)出現(xiàn)白屏,推薦使用)

利用v-if控制router-view，在根組件APP.vue中實(shí)現(xiàn)一個(gè)刷新方法

<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>

然后使用的時(shí)候調(diào)用： this.reload() 方法

方法三 : vuex清除token (不會(huì)出現(xiàn)白屏,推薦使用)

vuex清除token

由于項(xiàng)目中需要一個(gè)用戶登出的功能，而數(shù)據(jù)放在Vuex中在登出沒(méi)有刷新時(shí)數(shù)據(jù)并不會(huì)更新

所以找到了這樣一個(gè)很不錯(cuò)的方法

將state以各種方式保存

注冊(cè)時(shí)調(diào)用函數(shù)賦值

清空時(shí)再將保存的state賦值替換當(dāng)前的state

over

1. 首先默認(rèn)state時(shí)要用新的方法注冊(cè)

把數(shù)據(jù)寫(xiě)在函數(shù)的返回值中（其他方法也可以只要能調(diào)用）

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

2. 給Vuex中的state賦值并注冊(cè)

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

3. 在mutations中定義方法

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

4. 頁(yè)面中使用

    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)
      })
    })
  },

6. 退出登錄

組件中派發(fā)任務(wù)

    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
  },

親自測(cè)試有效：

第三種方法強(qiáng)烈推薦使用。

總結(jié)

到此這篇關(guān)于vue項(xiàng)目退出登錄清除store數(shù)據(jù)的三種方法的文章就介紹到這了,更多相關(guān)vue退出登錄清除store數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: