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

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

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