vue3中使用Pinia+SecureLS做加密持久化储存

// store/index.js

import { createPinia } from "pinia";

// 持久化和加密
import SecureLS from "secure-ls";

// 创建 SecureLS 实例
export const ls = new SecureLS({
  encodingType: "aes",
  isCompression: false,
});

const pinia = createPinia();

// 在 Pinia 中注册插件
pinia.use(({ store }) => {
  // 加密状态并存储到 SecureLS 中
  const encryptAndStoreState = () => {
    ls.set(store.$id, store.$state);
  };

  // 解密状态并恢复到 Pinia 中
  const decryptAndRestoreState = () => {
    const data = ls.get(store.$id);
    store.$state = data;
  };

  // 在每次状态变更时调用加密函数
  store.$subscribe(encryptAndStoreState);

  // 在初始化时调用解密函数
  decryptAndRestoreState();
});

export default pinia;

// store/modules/base.js
import { defineStore } from "pinia";
import i18n from "@/lang";
const { locale } = i18n.global;
export const useBaseStore = defineStore("base", {
  state: () => {
    return {
      language: "",
    };
  },
  actions: {
    setLanguage(val) {
      this.language = val;
    },
    initLang() {
      locale.value = this.language;
    },
  },
});

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import pinia from "./store";
const app = createApp(App);
app.use(pinia).mount("#app");

在组件中使用

<script setup>

import { useBaseStore } from "@/store/modules/base";
const baseStore = useBaseStore();


// 语言切换
let lang = ref("ZH");
const language = computed(() => baseStore.language);
lang.value = language.value == "zh" ? "ZH" : "EN";

const changeLang = (key) => {
  lang.value = key == "zh" ? "ZH" : "EN";
  locale.value = key;
  baseStore.setLanguage(key);
};

<script>