vuex数据持久化之vuexpersist简单用法及ES5转换处理

当我们用 vue 来开发网页的时候，大多数情况下会用到 vuex 来作状态管理。

但是 vuex 在浏览器刷新后数据就随着页在的重载而从新初始化。

很多时候我们并不想在刷新网页的时候将某些数据清除，所以 vuex-persist 应运而生。（传关门)

import VuexPersistence from 'vuex-persist'

const vuexLocal = new VuexPersistence({
  // 使用 localStorage
  storage: window.localStorage,
  // 如果不用这个函指定，那么默认所有 vuex 数数都作持久化处理
  reducer(val) {
      return {user: val.user // 这里只对 user 模块作数据持久化}
  }
})

然后在 vuex 中的 plugins 中引入

const store = {state: { ...},
  mutations: {...},
  actions: {...},
  modules: {
      user,
      ...
  }
  plugins: [vuexLocal.plugin]
}

接下来重点来了

vuex-persist 源码是由 typeScript 转过来的，很多没有作 ES5 的转化。所以在低版本火狐浏览器及 ie 中可能打不开（被坑了一波）。

看部分源码：

// vuex-persist/dist/cjs/index.js
exports.MockStorage = class {get length() {return Object.keys(this).length;
    }
    ...
}
...
flushQueue() {
    this._flushing = true;
    const chain = () => {const nextTask = this._queue.shift();
        if (nextTask) {return nextTask.then(chain);
        }
        else {this._flushing = false;}
    };
    return Promise.resolve(chain());
}

可以看到像 class const 箭头函数 等都没有被转换

ES6 转 ES5

在 webpack 中，使用 babel-loader 对 vuex-persist 进行处理

webpack.config.js

module.exports = {entry: { ...},
    output: {...},
    module: { 
        rule: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    ...
                    resolve('node_modules/vuex-persist/dist')
                ]
            }
        ]
    }
}

OK, 又解决一个很棘手的问题
vuex-persist 原代码不是很多，有空可以研究一下。