Vue實現實時更新sessionStorage數據的示例代碼

更新時間：2023年06月25日 15:49:09 作者：云卷云舒%

這篇文章主要為大家詳細介紹了Vue如何實現實時更新sessionStorage數據，文中的示例代碼講解詳細，具有一定的參考價值，需要的可以參考一下

最近在做一個需求是：頁面右上角顯示未讀消息數量，當用戶讀過消息后，數量要時時更新。

我這里直接將數據存儲在了sessionStorage中，但是當我修改數據時頁面并沒有及時更新，只有刷新頁面后數據才會更新。

解決辦法：

1、在main.js中添加全局獲取緩存數據

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

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'xxxx') {
    // 創(chuàng)建一個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ā)對象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal);
  }
}

2.在需要保存數據的地方進行調用

（key，value）

this.resetSetItem('xxxxx', value);

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

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

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

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

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

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

至此~就可以實現sessionStorage中的數據實時更新了

另外一種實現思路（親測有效~~~）：

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

vuex中使用vuex-persistedstate插件實現數據持久化

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

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

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

1.安裝插件

npm i vuex-persistedstate --save

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

這種默認寫法會將vuex中的所有數據存儲到Local Storage中，

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

如果我們想存儲到sessionStorage，又或者只想持久化某些數據的話，可以使用以下兩個屬性：

storage和reducer

  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
      console.log(val)
      return {
        // 只儲存state中的includes的leftList數據【這里多了一層includes，是因為本項目原因，大家可以打印一下val根據自己項目情況來賦值】
        leftList: val.includes.leftList
      }
    }
  })
]

完整代碼如下：