最近在做一個(gè)需求是：頁面右上角顯示未讀消息數(shù)量，當(dāng)用戶讀過消息后，數(shù)量要時(shí)時(shí)更新。

我這里直接將數(shù)據(jù)存儲(chǔ)在了sessionStorage中，但是當(dāng)我修改數(shù)據(jù)時(shí)頁面并沒有及時(shí)更新，只有刷新頁面后數(shù)據(jù)才會(huì)更新。

解決辦法：

1、在main.js中添加全局獲取緩存數(shù)據(jù)

只需修改xxx為自己定義的key即可

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'xxxx') {
    // 創(chuàng)建一個(gè)StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);
        // 初始化創(chuàng)建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派發(fā)對(duì)象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal);
  }
}

2.在需要保存數(shù)據(jù)的地方進(jìn)行調(diào)用

（key，value）

this.resetSetItem('xxxxx', value);

3.在需要獲取數(shù)據(jù)的地方進(jìn)行sessionStorage變化監(jiān)聽

mounted：頁面創(chuàng)建的時(shí)候添加監(jiān)聽

beforeDestroy： 在頁面銷毀的時(shí)候移除監(jiān)聽

  mounted() {
    window.addEventListener('setItem', this.updateUnreadMsgCount);
  },

 methods: {
    updateUnreadMsgCount() {
      this.unreadMessagesCount = sessionStorage.getItem('xxxxxx');
    },
}

  beforeDestroy() {
    window.removeEventListener('setItem', this.updateUnreadMsgCount);
  },

至此~就可以實(shí)現(xiàn)sessionStorage中的數(shù)據(jù)實(shí)時(shí)更新了

另外一種實(shí)現(xiàn)思路（親測(cè)有效~~~）：

若是將這個(gè)數(shù)量存儲(chǔ)到vuex的話，刷新頁面數(shù)據(jù)會(huì)丟失【但是可以使用vuex數(shù)據(jù)持久化vuex-persistedstate插件解決這一問題，原理也是幫助我們存儲(chǔ)在localStorage或者sessionStorage中，并且vuex中的數(shù)據(jù)變化后頁面也會(huì)跟著變化】

vuex中使用vuex-persistedstate插件實(shí)現(xiàn)數(shù)據(jù)持久化

vuex是在中大型項(xiàng)目中必不可少的狀態(tài)管理組件，刷新會(huì)重新更新狀態(tài)，但是有時(shí)候我們并不希望如此。例如全局相關(guān)的，如登錄狀態(tài)、token、以及一些不常更新的狀態(tài)等，我們更希望能夠固化到本地，減少無用的接口訪問，以及更佳的用戶體驗(yàn)。

• 那么我們可以采用存儲(chǔ)到localStorage的方式來解決這一問題，
• 也可以監(jiān)聽頁面刷新的時(shí)候重新處理數(shù)據(jù)
• 也可以用現(xiàn)在比較流行的插件vuex-persistedstate來解決（其實(shí)他的原理也是存儲(chǔ)在了local storage，但是不用我們手動(dòng)去處理了）

讓我們來看下使用插件是如何做到持久化的

1.安裝插件

npm i vuex-persistedstate --save

2.之前怎么寫vuex的數(shù)據(jù)管理還怎么寫，只不過在store/index.js文件引入一下這個(gè)插件，并配置即可

這種默認(rèn)寫法會(huì)將vuex中的所有數(shù)據(jù)存儲(chǔ)到Local Storage中，

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

如果我們想存儲(chǔ)到sessionStorage，又或者只想持久化某些數(shù)據(jù)的話，可以使用以下兩個(gè)屬性：

storage和reducer

  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
      console.log(val)
      return {
        // 只儲(chǔ)存state中的includes的leftList數(shù)據(jù)【這里多了一層includes，是因?yàn)楸卷?xiàng)目原因，大家可以打印一下val根據(jù)自己項(xiàng)目情況來賦值】
        leftList: val.includes.leftList
      }
    }
  })
]

完整代碼如下：

測(cè)試1：將所有數(shù)據(jù)存儲(chǔ)到Session Storage中

測(cè)試2：將某個(gè)數(shù)據(jù)存儲(chǔ)到Local Storage中

另，Vue3中如果項(xiàng)目使用了ts，那么Vuex對(duì)ts是不太友好的，可以考慮使用pinia插件代替vuex

到此這篇關(guān)于Vue實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)的示例代碼的文章就介紹到這了,更多相關(guān)Vue更新sessionStorage數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論