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

时间：2019-07-18 18:26:44 阅读：268 评论：0 收藏：0 [点我收藏+]

在以前的开发中，我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。

优点：vuex相对sessionStorage，存储数据更安全，sessionStorage可在浏览器控制台看到
缺点：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

解决方案：使用vuex-persistedstate插件

原理：

将vuex的state存在localStorage或sessionStorage或cookie中一份
刷新页面的一瞬间，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]
})
复制代码

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

原文：https://www.cnblogs.com/qinmanyu/p/11208995.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)