vue3-pinia-ts项目中的使用示例详解

store.ts

import { defineStore } from "pinia";
import { GlobalState, ThemeConfigProp } from "./interface";
import { createPinia } from "pinia";
import piniaPersistConfig from "@/config/piniaPersist";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id: "GlobalState",
// state: 返回对象的函数
state: (): GlobalState => ({
// token
token: "",
// userInfo
userInfo: "",
// element组件大小
assemblySize: "default",
// language
language: "",
// themeConfig
themeConfig: {
// 默认 primary 主题颜色
primary: "#409EFF",
// 深色模式
isDark: false,
// 灰色模式
isGrey: false,
// 色弱模式
isWeak: false,
// 面包屑导航
breadcrumb: true,
// 标签页
tabs: true,
// 页脚
footer: true
}
}),
getters: {},
actions: {
// setToken
setToken(token: string) {
this.token = token;
},
// setUserInfo
setUserInfo(userInfo: any) {
this.userInfo = userInfo;
},
// setAssemblySizeSize
setAssemblySizeSize(assemblySize: string) {
this.assemblySize = assemblySize;
},
// updateLanguage
updateLanguage(language: string) {
this.language = language;
},
// setThemeConfig
setThemeConfig(themeConfig: ThemeConfigProp) {
this.themeConfig = themeConfig;
}
},
persist: piniaPersistConfig("GlobalState")
});
// piniaPersist(持久化)
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import pinia from "@/store/index";
...
const app = createApp(App);
app.use(router).use(I18n).use(pinia).use(directives).use(ElementPlus).mount("#app");

页面使用

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Login } from "@/api/interface";
import { CircleClose, UserFilled } from "@element-plus/icons-vue";
import type { ElForm } from "element-plus";
import { ElMessage } from "element-plus";
import { loginApi } from "@/api/modules/login";
import { GlobalStore } from "@/store";
import { MenuStore } from "@/store/modules/menu";
import { TabsStore } from "@/store/modules/tabs";
import md5 from "js-md5";
const globalStore = GlobalStore();
const menuStore = MenuStore();
const tabStore = TabsStore();
// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});
// 登录表单数据
const loginForm = reactive<Login.ReqLoginForm>({
username: "",
password: ""
});
const loading = ref<boolean>(false);
const router = useRouter();
// login
const login = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async valid => {
if (!valid) return;
loading.value = true;
try {
const requestLoginForm: Login.ReqLoginForm = {
username: loginForm.username,
password: md5(loginForm.password)
};
const res = await loginApi(requestLoginForm);
// * 存储 token
globalStore.setToken(res.data!.access_token);
// * 登录成功之后清除上个账号的 menulist 和 tabs 数据
menuStore.setMenuList([]);
tabStore.closeMultipleTab();
ElMessage.success("登录成功！");
router.push({ name: "home" });
} finally {
loading.value = false;
}
});
};
// resetForm
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
onMounted(() => {
// 监听enter事件（调用登录）
document.onkeydown = (e: any) => {
e = window.event || e;
if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
if (loading.value) return;
login(loginFormRef.value);
}
};
});
</script>

到此这篇关于vue3-pinia-ts项目中的使用的文章就介绍到这了,更多相关vue3-pinia-ts使用内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)！