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

vue使用Pinia实现不同页面共享token

web 2025/8/23 7:44:02

文章目录

一、概述
二、使用步骤
- 安装pinia
- 在vue应用实例中使用pinia
- 在src/stores/token.js中定义store
- 在组件中使用store
- - 登录成功后，将token保存pinia中
  - 向后端API发起请求时，携带从pinia中获取的token
三、参考资料

一、概述

Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态
在这里插入图片描述

二、使用步骤

安装pinia

npm install pinia

在vue应用实例中使用pinia

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

在这里插入图片描述

在src/stores/token.js中定义store

import { defineStore } from "pinia";
import {ref} from 'vue';/*defineStore参数描述：第一个参数：给状态起名，具有唯一性第二个参数：函数，可以把定义该状态中拥有的内容defineStore返回值描述：返回的是一个函数，将来可以调用该函数，得到第二个参数中返回的内容
*/
export const useTokenStore = defineStore('token',()=>{//1.定义描述tokenconst token = ref('')//2.定义修改token的方法const setToken = (newToken)=>{token.value = newToken}//3.定义移除token的方法const removeToken = ()=>{token.value=''}return {token,setToken,removeToken}
}
)

在组件中使用store

登录成功后，将token保存pinia中

//导入token状态
import { useTokenStore } from '@/stores/token.js'
//调用useTokenStore得到状态
const tokenStore = useTokenStore();//保存tokentokenStore.setToken(result.data)

在这里插入图片描述

向后端API发起请求时，携带从pinia中获取的token

在article.js中导入@/stores/token.js, 在发起查询文章分类列表的时候把token通过请求头的形式携带给服务器

//导入@/stores/token.js
import { useTokenStore } from '@/stores/token'//文章分类列表查询
export const articleCategoryListService = () => {//获取token状态const tokenStore = useTokenStore()//通过请求头Authorization携带tokenreturn request.get('/category', { headers: { 'Authorization': tokenStore.token } })
}