vuex数据持久化、加密(vuex-persistedstate、secure-ls)

加密前：

加密后：

使用：

下载：

npm i vuex-persistedstate  secure-ls

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-10-23 16:25:18
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-10-24 10:03:18
 */
import Vue from 'vue'
import Vuex from 'vuex'
import SecureLS from "secure-ls";
import persistedState from 'vuex-persistedstate'
// 主页面的store
import home from './modules/home';

Vue.use(Vuex);
var ls = new SecureLS({
   
  encodingType: "aes",    //加密类型
  isCompression: false,   //是否压缩
  encryptionSecret: "encryption",   //PBKDF2值  加密秘密
});
export default new Vuex.Store({
   
  plugins: [persistedState({
   
    key: "encryptionStore",
    storage: {
   
      getItem: (key) => ls.get(key),
      setItem: (key, value) => ls.set(key, value),
      removeItem: (key) => ls.remove(key),
    },
  })], //添加插件
  modules: {
   
    home,
  }

})



// 使用 两种方法
/**
 * 
<script>
import { mapState, mapMutations ,mapActions, createNamespacedHelpers } from "vuex";
// let { mapState, mapMutations } = createNamespacedHelpers("home");
export default {
  name: "App",
  computed: {
    // ...mapState({
    //   zjq: state => state.zjq
    // })
    ...mapState({
      zjq: state => state.home.zjq
    })
  },
  async mounted() {

  },
  methods: {
    ...mapActions('home',['changeMenuAction']),
    // ...mapMutations('home',[
    //   "changeName" // -> this.foo()
    // ])
    // ...mapMutations([
    //   "changeName" // -> this.foo()
    // ])
  }
};
</script>
 */