如何解决vuex碰到浏览器刷新页面数据的丢失

方案1

本地存储，利用浏览器的会话缓存 sessionStorage 或者localStorage, cookies，具体实现代码如下：

• 在 App.vue 中增加监听刷新事件

export default {
    name: "App",
    mounted() {
        window.addEventListener("unload", this.savaState);
    },
    methods: {
        savaState() {
            sessionStorage.setItem("tabList", JSON.stringify(this.$store.state.tabsView.tabList));
        },
    }
}

方案2

利用插件vuex-persistedstate

• 安装

npm install --save vuex-persistedstate

• tabsView.js

const state = {
    // tabList: sessionStorage.getItem('tabList')?JSON.parse(sessionStorage.getItem('tabList')) : [], // 页签数组
    tabList: [], // 页签数组
}

const getter = {}

const mutations = {
}

const actions = {
}

export default {
    namespaced: true, // 开启命名空间
    state,
    getter,
    mutations,
    actions,
}

• store 出口文件 index.js

2import Vue from "vue"
import Vuex from "vuex"
// 引入插件api
import createPersistedState from "vuex-persistedstate";
// 引入module js文件
import tabsView from "./modules/tabsView"

const tabListState = createPersistedState({
    storage: window.sessionStorage, // 使用sessionStorage 进行state 持久化
    paths: ['tabsView.tabList'] // 只对 tabsView module 文件中的 tabList state 持久化
    // paths: ['tabsView'] // 对 tabsView module 文件中的整个 state 持久化
})

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        tabsView,
    },
    plugins: [tabListState]
})

export default store

总结

方案一：比较适合只对一个state 进行持久化，代码程度不复杂，简单，但是随之而来的就是书写的复杂度，在对state 命名赋值的时候都需要判断是从本地存储中取，还是直接赋值，代码不美观，不易于维护。
方案二：相比方案一，依赖插件，代码美观，统一的都在store的出口文件 index.js中进行维护，具有一定的优势，特别是如果需要对多个state 进行持久化的化，方案二无疑是最佳选择。

• 本文作者： Li Bo
• 本文链接： http://example.com/2021/03/24/vuex碰到浏览器刷新/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！