Vue 之 vuex 解决刷新页面 state 数据丢失的问题，使用vuex-persistedstate进行state持久化

Posted 2022-12-08 zhuangwei_8256

vuex state 持久化的解决方案

• • `store` 目录介绍
  • 方案一
  • 方案二
  • 总结

  vue项目在使用 vuex 时都会存在一个问题，那就是当浏览器刷新时会清除 vuex 缓存的 state 数据，而偶尔可能会碰到某种需求需要实现在刷新浏览器时不清除vuex缓存的数据，那么该如何实现呢？

store 目录介绍

方案一

利用本地存储；
  这个时候我们就需要利用到浏览器的会话缓存 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));
        ,
    

• tabsView.js

/**
 * 顶部页签栏
 */

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


const getter = 

const mutations = 


const actions = 


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

  
  

方案二

利用插件vuex-persistedstate；

附上vuex-persistedstategithub地址，里面readme文件有详细的使用说明。

• 安装

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

import 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 进行持久化的化，方案二无疑是最佳选择。

综上，大家可以各自根据需求使用方案一或者方案二。

  
  

如有不足，望大家多多指点！ 谢谢！