Vue实现实时更新sessionStorage数据的示例代码

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'xxxx') {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal);
  }
}

this.resetSetItem('xxxxx', value);

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

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

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

npm i vuex-persistedstate --save

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

  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
      console.log(val)
      return {
        // 只储存state中的includes的leftList数据【这里多了一层includes，是因为本项目原因，大家可以打印一下val根据自己项目情况来赋值】
        leftList: val.includes.leftList
      }
    }
  })
]