24，Pinia状态管理库

admin

Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态


main.js
import './assets/main.scss'

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router'
import locale from 'element-plus/dist/locale/zh-cn.js'
import {createPinia} from 'pinia'

const app = createApp(App);
const pinia = createPinia();
app.use(router);
app.use(pinia);
app.use(ElementPlus,{locale});
app.mount('#app');


stores/token.js
//定义store
import {defineStore} from 'pinia'
import {ref} from 'vue'
/*
    第一个参数:名字,唯一性
    第二个参数:函数,函数的内部可以定义状态的所有内容

    返回值: 函数
*/
export const useTokenStore = defineStore('token',()=>{
    //定义状态的内容

    //1.响应式变量
    const token = ref('')

    //2.定义一个函数,修改token的值
    const setToken = (newToken)=>{
        token.value = newToken
    }

    //3.函数,移除token的值
    const removeToken = ()=>{
        token.value=''
    }

    return {
        token,setToken,removeToken
    }
},{
    persist:true//持久化存储
});


Login.vue
/登录函数
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
//定义函数,清空数据模型的数据
const clearRegisterData = ()=>{
    registerData.value={
        username:'',
        password:'',
        rePassword:''
    }
}
import { useRouter } from 'vue-router'
const router = useRouter()
const login =async ()=>{
    //调用接口,完成登录
   let result =  await userLoginService(registerData.value);
//     console.log(result);
//    if(result.code===0){
//     alert(result.msg? result.msg : '登录成功')
//    }else{
//     alert('登录失败')
//    }
   //alert(result.msg? result.msg : '登录成功')
   ElMessage.success(result.msg ? result.msg : '登录成功')
   //把得到的token存储到pinia中
    tokenStore.setToken(result.data)
   //跳转到首页 路由完成跳转
    router.push('/')
}


api/article.js


import request from '@/utils/request.js'
import { useTokenStore } from '@/stores/token.js'
//文章分类列表查询
export const articleCategoryListService = ()=>{
    const tokenStore = useTokenStore();
    //在pinia中定义的响应式数据,都不需要.value
    return request.get('/category',{headers:{'Authorization':tokenStore.token}})
    // return request.get('/category')
}