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

最新推荐文章于 2024-08-14 22:58:42 发布

六卿

最新推荐文章于 2024-08-14 22:58:42 发布

阅读量884

点赞数 3

分类专栏： # vue 文章标签： vue.js javascript vuex 加密数据持久化

本文链接：https://blog.csdn.net/qq_43291759/article/details/127545831

版权

vue 专栏收录该内容

75 篇文章 17 订阅

订阅专栏

加密前：
在这里插入图片描述
加密后：

使用：

下载：

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>
 */