其他分享
首页 > 其他分享> > 解决Vuex持久化插件-在F5刷新页面后数据不见的问题

解决Vuex持久化插件-在F5刷新页面后数据不见的问题

作者:互联网

解决Vuex持久化插件-在F5刷新页面后数据不见的问题

在以前的开发中, 我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后,vuex便可以被应用了。 解决方案: 使用vuex-persistedstate插件 原理:
  1. 将vuex的state存在localStorage或sessionStorage或cookie中一份
  2. 刷新页面的一瞬间,vuex数据消失,vuex回去sessionStorage中哪会数据,变相的实现了数据刷新不丢失
使用: 安装
npm install vuex-persistedstate  --save
引入及配置 在store下的index.js中
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ... plugins: [createPersistedState()]
})

想要存储到sessionStorage,配置如下:

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})
vuex-persistedstate默认持久化所有state,指定需要持久化的state,配置如下:
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的user
          user: val.user
        }
     }
  })]

注意:如果此刻想配置多个选项,将plugins写成一个一维数组,不然会报错。

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]
})
复制代码

 

标签:插件,F5,Vuex,plugins,sessionStorage,persistedstate,vuex,createPersistedState
来源: https://www.cnblogs.com/qinmanyu/p/11208995.html