用法地址:https://seb-l.github.io/pinia-plugin-persist/
安裝:
npm i pinia-plugin-persist --save --include=dev
引入
src目錄下創(chuàng)建文件夾store唧龄,store目錄下創(chuàng)建index.ts 內(nèi)容如下
import { createPinia } from "pinia";
import piniaPersist from "pinia-plugin-persist";
const pinia = createPinia();
pinia.use(piniaPersist);
export default pinia;
main.ts 引入pinia內(nèi)容如下:
import { createApp } from "vue";
import App from "./App.vue";
import pinia from "./store";
const app = createApp(App);
app.use(pinia);
app.mount("#app");
用法 示例如下 其他的看看說明文檔就行了
https://seb-l.github.io/pinia-plugin-persist/
import { getToken } from "/@utils/tokenUtil";
import { login } from "/@api/userApi";
import cookieUtil from "/@/utils/cookieUtil";
import router from "../../router";
import { ElMessage } from "element-plus";
import { defineStore } from "pinia";
export const userStore = defineStore("userStore", {
state: () => ({
token: getToken(),
roles: [],
permissions: [],
menus: [],
}),
persist: {
enabled: true,
strategies: [
{ storage: localStorage, paths: ["token", "menus"] },
],
},
getters: {
getToken(state: { token: string }): string {
return state.token;
},
},
actions: {
setToken(value: string) {
this.token = value;
},
Login(userInfo: any) {
login(userInfo)
.then((res: any) => {
debugger;
if (res.data.errorCode === "00000") {
let r = res.data.data;
this.token = r.accessToken;
cookieUtil.cookieRemove("LOGIN_CAPTCHA_CODE");
console.log(r.menus);
this.menus = r.menus;
//異步獲取用戶權(quán)限數(shù)據(jù) TODO
ElMessage({
message: "登陸成功", //提示的信息
type: "success", //類型是成功
//offset:225, //距離窗口頂部的偏移量,建議不設(shè)置
duration: 500, //顯示時間, 毫秒。設(shè)為 0 則不會自動關(guān)閉翁逞,建議1200
onClose: () => {
//跳轉(zhuǎn)頁面或執(zhí)行方法
router.push("/index");
},
});
}
})
.catch(() => {
console.log("登陸失敗");
});
},
},
});