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