当前位置：首页 > ai >正文

pinia的简单使用

ai 2025/8/18 11:38:09

yarn add pinia
// 用来存储token,用户信息，等需要多地方使用的信息
src目录下新建store文件夹->新建index.ts

import { createPinia } from "pinia";const store = createPinia()export default store

main.ts 引用store

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')

获取与存储接口路由->新建base.ts

import axios from "axios";
import { defineStore } from "pinia";export const useBaseStore = defineStore({id:'baseConfig',state:()=>{return {axiosBaseUrl:'',}},actions:{getConfigJson() {return new Promise<any>((resolve,reject)=>{axios.get('../../public/serverconfig.json').then((result)=>{this.axiosBaseUrl = result.data.ApiUrlresolve(result.data)}).catch((error)=>{reject(error)})})}}
})

页面获取接口路由

<script setup lang="ts">
import { useBaseStore } from '../store/base';
const baseStore: any = useBaseStore
const baseApiUrl = baseStore.axiosBaseUrl
// 一般是手写接口，或者上传时候用到接口路由，其他情况用封装好的接口就可
</script>

保存用户信息以及taken store->新建userStore.ts

import { defineStore } from "pinia";
import { setToken } from "../utils/auth";export const useUserStore = defineStore('userStore',{state:()=>{return {userName:'',userId:'',token:'',}},actions:{async getUserInfo() {//useInfo已封装好的获取用户信息接口let res = await useInfo()if(res.result==1) {this.userId = res.data.userIdthis.userName = res.data.userName}return res},async userLogin(ruleForm:any){//login 已封装好的登录接口let res = await login({data:{Account:ruleForm.Account,Password:ruleForm.Password}})if(res.result==1) {this.token = res.data.tokensetToken(res.data.token)// setToken 保存token到浏览器里}return res}}
})

页面调用登录以及获取用户信息接口

<template><div><!-- pina --><el-button @click="login">登录</el-button><el-button @click="getInfo">获取用户详情</el-button></div>
</template>
<script setup lang="ts">
import { ElMessage, type FormInstance } from 'element-plus';
import { useUserStore } from '../store/userStore';
import { reactive, ref } from 'vue';
interface RuleForm {Account: stringPassword: string
}const ruleFormRef: any = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({Account: '',Password: ''
})
const useStore: any = useUserStore
const login = async () => {let res = await useStore.userLogin(ruleForm)if (res.result == 1) {// 登录成功//登录成功之后保存数据和跳转到其他页面} else {// 登录失败ElMessage.error(res.error)}
}
const getInfo = async () => {let res = await useStore.getUserInfo()if (res.result == 1) {// 获取用户详情} else {ElMessage.error(res.error)}
}
</script>