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

Posted zhuangwei_8256

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 之 vuex 解决刷新页面 state 数据丢失的问题,使用vuex-persistedstate进行state持久化相关的知识,希望对你有一定的参考价值。

vuex state 持久化的解决方案

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

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

  
  

如有不足,望大家多多指点! 谢谢!

以上是关于Vue 之 vuex 解决刷新页面 state 数据丢失的问题,使用vuex-persistedstate进行state持久化的主要内容,如果未能解决你的问题,请参考以下文章

vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

Vue 刷新网页后 vuex 的 state 数据丢失的解决方案

解决vue单页面刷新后vuex中数据恢复初始值的问题

vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

解决vuex刷新页面数据丢失