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

ゝ一世哀愁。 2021-09-13 17:22 322阅读 0赞

# vue单页面应用刷新网页后vuex的state数据丢失的解决方案-------》 vuex数据状态持久化 #

最近只用到了vuex，vuex具体不多说，发现一个问题：刷新地址栏，vuex数据丢失  
直接解决方案：  
我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

## 1通过 vuex-persistedstate这个插件，来实现将数据存储到本地 ##

npm install vuex-persistedstate

之后使用这个插件在Store中

默认存储到localStorage

import createPersistedState from 'vuex-persistedstate'
    const store = new Vuex.Store({
    modules: {    
        token,   //以模块的方式导出，这是专属于token的，可以有共享一个登陆状态
      },
      plugins: [createPersistedState()]  //加上这个就可以了
    })

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
    const store = new Vuex.Store({
      // ...
      plugins: [createPersistedState({
          storage: window.sessionStorage
      })]
    })

想使用cookie同理  
默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
    const store = new Vuex.Store({
      // ...
      plugins: [createPersistedState({
          storage: window.sessionStorage,
          reducer(val) {
              return {
              // 只储存state中的assessmentData
              assessmentData: val.assessmentData
            }
         }
      })]

vuex引用多个插件的写法  
譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
    import createLogger from 'vuex/dist/logger'
    // 判断环境 vuex提示生产环境中不使用
    const debug = process.env.NODE_ENV !== 'production'
    const createPersisted = createPersistedState({
      storage: window.sessionStorage
    })
    export default new Vuex.Store({
     // ...
      plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
    })
    //**注意：plugins要是一个一维数组不然会解析错误

[转载地址：https://blog.csdn.net/qq\_30841657/article/details/97099274][https_blog.csdn.net_qq_30841657_article_details_97099274]

也在网上搜了很多在APP.vue中设置等，发现进不去beforeunload方法，已失败告终！这个插件简直不要太好用，感谢这个博主

[https_blog.csdn.net_qq_30841657_article_details_97099274]: https://blog.csdn.net/qq_30841657/article/details/97099274