怎么解决vuex刷新页面后丢失数据=>vuex-persistedstate

标题：解决vuex在刷新页面之后丢失数据=>vuex-persistedstate
当页面刷新后，想保存页面未保存得数据。我们总是习惯于放在浏览器得sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储得数据会丢失。

为了克服这个问题， vuex-persistedstate出现了~~

原理：
将vuex得state存在localStorage或sessionStorage或cookie中一份
刷新页面得一瞬间，vuex数据消失，vuex回去sessionStorage中哪会数据，变相得实现了数据刷新不丢失
使用方法：
安装：
npm install vuex-persistedstate --save
1
引入及配置
在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
  })]
})

想使用cookie或localStorage同理

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
        }
     }
  })]

此刻得val 对应store/modules文件夹下几个js文件存储得内容，也就是stor/index中import得9个模块，希望哪一部分得数据持久存储，将数据得名字在此配置就可以，目前我只想持久化存储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]
})

好的，今天就写到这里吧，写作真的是不易，主要能帮到广大编程爱好者就可以，如果您在编程的过程中遇到任何问题可以来杰凡IT编程问答平台上提问，平台上大佬很多，平台网址：https://www.jf3q.com