效果展示
数据加密+持久化
加载依赖
npm install secure-ls ------------数据加密
npm install vuex-persistedstate ------------vuex持久化
vuex代码
import Vue from "vue";
import Vuex from "vuex";
import {
$isRead } from "../api/index";
import SecureLS from "secure-ls";
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
var ls = new SecureLS({
encodingType: "aes", //加密类型
isCompression: false,
encryptionSecret: "encryption", //PBKDF2值
});
export default new Vuex.Store({
plugins: [
createPersistedState({
key: "encryptionStore",
storage: {
getItem: (key) => ls.get(key),
setItem: (key, value) => ls.set(key, value),
removeItem: (key) => ls.remove(key),
},
}),
], //vuex持久化
state: {
userInfo: {
},
routerIndex: 0,
readNumber: 0,
},
mutations: {
stateRoute(state, data) {
state.routerIndex = data;
},
setuserInfo(state, data) {
state.userInfo = data;
},
clearuserInfo(state) {
state.userInfo = {
};
},
updateReadNumber(state, data) {
state.readNumber = data;
},
},
actions: {
updateNumber(context, step) {
$isRead({
port: 0 }).then((res) => {
context.commit("updateReadNumber", res.number);
});
},
},
modules: {
},
});