---

一、概述

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中

Login.vue

//導入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 } })
}

三、參考資料

https://www.bilibili.com/video/BV14z4y1N7pg?spm_id_from=333.788.player.switch&vd_source=0467ab39cc5ec5940fee22a0e7797575&p=80