效果展示

数据加密+持久化

加载依赖

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: {
    
    },
});