Pinia状态管理库

为了跨组件传递JWT令牌，我们就会利用Pinia状态管理库，它允许跨组件或页面共享状态。

使用Pinia步骤：

安装pinia：cnpm install pinia
在vue应用实例中使用pinia
在src/stores/token.js中定义store
在组件中使用store 

1.在main.js文件导入pinia：

这里因为Pinia是默认内存存储，刷新浏览器会丢失数据，我们使用pinia内的Persist插件就可以将Pinia中的数据持久化存储。

为了使用persist，我们需要安装persist：cnpm install pinia-persistedstate-plugin，然后再pinia中使用persist，并且需要再main.js导入一下。

import './assets/main.scss'import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'const app = createApp(App);
//创建createPinia()函数实例
const pinia = createPinia();
const persist = createPersistedState();
pinia.use(persist)
app.use(pinia)
app.use(router)
app.use(ElementPlus);
app.mount('#app')

2.定义store状态：

其实无外乎就是使用defineStore()方法，在方法内部分为两个参数来写 ：

第一个参数：名字，确保唯一性。
第二个参数：函数，其内部可以定义状态的所有内容，其内部先创建一个响应式数据，然后设置获取数据以及删除数据的方法，最后返回数据以及方法。

加上Persist插件就可以将Pinia中的数据持久化存储。

//定义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  //因为Pinia是默认内存存储，刷新浏览器会丢失数据，使用Persist插件就可以将Pinia中的数据持久化存储
}
);

这样我们就可以调用定义的useTokenStore来使用pinia了。

eg：文章分类列表渲染：

我们的目的是想要通过pinia来跨组件使用token请求头内的JWT令牌，将其封装给请求头。

我们首先再Login.vue文件中把得到的token存储到pinia中：

//导入store状态
import { useTokenStore } from '@/stores/token.js';
//导入路由器
import { useRouter } from 'vue-router';
const tokenstore = useTokenStore();
const router = useRouter();
//表单数据校验
const login = async()=>{let result = await userLoginService(registerData.value);// alert(result.msg ? result.msg : '登录成功'); ElMessage.success(result.msg ? result.msg : '登录成功');//将得到的token存储到pinia中tokenstore.setToken(result.data);//通过路由跳转首页router.push('/');
}

然后再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}});
} 

但是这样我们需要将剩下的请求函数都要传递JWT令牌，代码会很繁琐，这个时候我们就可以添加请求拦截器来使用回调函数来发送。

添加请求拦截器：

在request.js文件中添加请求拦截器：

import { useTokenStore } from '@/stores/token.js';
//添加请求拦截器
instance.interceptors.request.use((config)=>{//请求前的回调const tokenStore = useTokenStore();if(tokenStore.token){//通过config调用headers获取请求头，在调用Authorization将JWT令牌存放到内部以此来添加统一的请求头config.headers.Authorization = tokenStore.token;}return config;},(err)=>{//请求错误的回调Promise.reject(err);//异步的状态转化成失败的状态}
)
export default instance;

修改article.js文件的请求函数：

import request from '@/utils/request.js'export const ArticleCategoryListService = ()=>{return request.get('/category');
}