優雅的解決Vuex狀態丟失的問題

場景重現

相信不少小夥伴在使用Vuex存儲狀態數據時，都遇到過這樣的尷尬處境：

瀏覽器在未刷新、回退、前進時，Vuex一切正常；

當進行刷新、回退、前進（以後簡稱：騷操做）時，發現Vuex存儲的狀態值，都變成了初始值！

oh～no～ 😫 這不是我要的效果！！

好不容易從API拿過來的基礎數據，都沒了～一朝回到解放前！

產生緣由

在解決問題前，咱們先來捋一捋～爲啥會這樣呢？

Vuex是js工程，數據是存儲在內存中，在進行騷操做時，會讓Vuex從新加載，導致數據所有還原成初始值!

解決思路

Vuex既然在進行這些騷操做時會丟失，那是否是能夠考慮用localStorage、sessionStorage甚至Cookie來持久化存儲Vuex呢？

答案固然是能夠的！

咱們去翻翻 Vuex官網，能夠看到Vuex提供了很是方便的插件功能來幫助咱們來搞定這個需求～

廢話很少說，直接上代碼～

// @/store/plugins/createPersistedPlugin.js
export default function createPersistedPlugin(options = { key: 'store' }) {
    return store => {
        // 1. 判斷`sessionStorage`中是否有`Vuex`快照
        let sessionStore = JSON.parse(sessionStorage.getItem(options.key))
        // 若無，則使用初始值, 不然使用快照的值
        sessionStore && store.replaceState(sessionStore)
        // 臨時工，用完就解僱了～
        sessionStore = null
        // 2. 監聽`Vuex`中`mutation`的變化
        store.subscribe((mutation, state) => {
            // 3. 動態存儲`Vuex`快照至`sessionStorage`中
            sessionStorage.setItem(options.key, JSON.stringify(state))
        })
    }
}
複製代碼

使用方法：

// @/store/index.js
import createPersistedPlugin from './plugins/createPersistedPlugin.js'
const persistedPlugin = createPersistedPlugin()

const store = new Vuex.Store({
  state,
  // 其餘代碼
  mutations,
  plugins: [persistedPlugin]
})

複製代碼

至此，不再用擔憂測試員進行騷操做啦～😄

總結

以上代碼也就拋磚引玉～還有更多能夠完善的餘地，如：

• 將sessionStorage提煉到options中，能夠根據不一樣業務場景使用對應的持久化對象，如localStorage
• 在options中加上一個expires有效期，在expires內有效，讓功能更加細緻化
• 添加include、exclude字段，讓state能夠選擇性的更替快照
• and so on...
• 若有你有更好的idea，歡迎留言～

這是個人第一篇博文，寫的很差的地方還請你們多多指教！輕點吐槽～

謝謝！☕️～