誤引用vuex-persistedstate導(dǎo)致用戶信息無(wú)法清除怎么解決

這篇“誤引用vuex-persistedstate導(dǎo)致用戶信息無(wú)法清除怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“誤引用vuex-persistedstate導(dǎo)致用戶信息無(wú)法清除怎么解決”文章吧。

vuex-persistedstate導(dǎo)致用戶信息無(wú)法清除

問(wèn)題

網(wǎng)站使用nuxt框架，使用js-cookie+vuex存儲(chǔ)用戶信息，在這一篇文章中關(guān)于nuxt使用vuex存儲(chǔ)以及獲取用戶信息踩坑，我講過(guò)nuxt是服務(wù)端和客戶端渲染集成，所以服務(wù)端將user信息初始化為空，客戶端無(wú)法再次初始化，即便客戶端的cookie中能獲取到用戶信息，也無(wú)法給user賦值。

后來(lái)在網(wǎng)上搜索了半天解決辦法，引入了vuex-persistedstate,但是引入之后并未使用,且并未及時(shí)刪除，仍然使用cookie在客戶端獲取user信息，清除cookie中user信息，發(fā)現(xiàn)user信息仍然存在，經(jīng)排查發(fā)現(xiàn)localStorage存儲(chǔ)了一份user信息，逐步排查發(fā)現(xiàn)是因?yàn)檎{(diào)用了vuex-persistedstate將user信息和token存儲(chǔ)在localStrorage,但是在退出登錄時(shí)只清除了vuex中token，并未清除user信息，所以導(dǎo)致問(wèn)題的出現(xiàn)。

解決辦法

刪除vuex-persistedstate或者在退出登錄時(shí)清除vuex中user信息。

延伸

1、基于以上問(wèn)題，研究了一下vuex-persistedstate，發(fā)現(xiàn)三點(diǎn)：存儲(chǔ)位置：默認(rèn)localStorage（永久存儲(chǔ)本地，只能手動(dòng)刪除）,可修改為sessionStorage（關(guān)閉瀏覽器即無(wú)）；存儲(chǔ)對(duì)象鍵：默認(rèn)為vuex,可任意修改，存儲(chǔ)對(duì)象：store。

nuxt中使用vuex-persistedstate,通過(guò)在nuxt.config.js中全局引入

localStorage.js

import createPersistedState from 'vuex-persistedstate'
 
export default ({ store }) => {
  window.onNuxtReady(() => {
    createPersistedState({ key: 'paida-vuex', storage: window.sessionStorage })(store)
  })
}

nuxt.config.js

 plugins: [
    {
      src: '~/plugins/localStorage',
      ssr: false
    }
  ]

2、cookie禁用問(wèn)題：因?yàn)榫W(wǎng)站是在用戶信息和token存儲(chǔ)在cookie中，禁用之后登錄相關(guān)操作無(wú)法進(jìn)行。谷歌、火狐禁用cookie,導(dǎo)致localStorage,sessionStorage無(wú)法正常使用。

另外,做了一個(gè)突發(fā)奇想的測(cè)試，在axios的配置文件中直接引入store,獲取token,即便登錄獲取到token，也更新了store,但是因?yàn)閍xios作為外部插件引入，并不屬于vue 組件，所以無(wú)法獲取token的最新信息。 

使用vuex-persistedstate插件遇到的問(wèn)題

這是一個(gè)做持久化的插件:vuex-persistedstate

 我在做項(xiàng)目時(shí),遇到一個(gè)問(wèn)題,就是做下面這個(gè)功能,渲染數(shù)據(jù)的時(shí)候,因?yàn)檫@個(gè)數(shù)據(jù)好多個(gè)地方使用,所以呢,把它存到了vuex里面。vuex 是將數(shù)據(jù)存到了瀏覽器的內(nèi)存中,刷新就沒(méi)了

這行代碼是寫(xiě)在vuex里面的,就是說(shuō),我直接從本地去拿數(shù)據(jù)

list: JSON.parse(window.localStorage.getItem('abc')).category.list || []

直接看下代碼：我一開(kāi)始是這樣想的,既然我vuex中有數(shù)據(jù)了,不用計(jì)算屬性行不行,直接渲染,確實(shí)可以渲染,但是品牌這一項(xiàng)咋渲染呢,push行不通啊,那就只能把結(jié)構(gòu)寫(xiě)死,但是頁(yè)面效果就不對(duì)了,所以這個(gè)地方用計(jì)算屬性,第一,動(dòng)態(tài)的取到前兩項(xiàng),第二,可以動(dòng)態(tài)的添加新的 li 結(jié)構(gòu)。

計(jì)算屬性使用的場(chǎng)景：有數(shù)據(jù)啦，但不是我想要的格式，要加工加工

 setup () {
    const brand = reactive({
      id: 'brand',
      name: '品牌',
      children: [{ id: 'brand-children', name: '品牌推薦' }]
    })
    const store = useStore()
    const cateList = computed(() => {
      const list = store.state.category.list.map(item => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2)
        }
      })
      list.push(brand)
      return list
    })
    return { cateList }
  }

以上就是關(guān)于“誤引用vuex-persistedstate導(dǎo)致用戶信息無(wú)法清除怎么解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。