pinia的各种示范

token：

store\user.js：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user',{
    //变量名
    state: () => ({
        token: null,
        email: null
    }),
    //方法
    actions: {
        setUser(email,token) {
            this.token = token,
            this.email = email
        },
        logout() {
            this.token = null,
            this.email = null,
            localStorage.removeItem('email'),
            localStorage.removeItem('token')
        },
        getToken() {
            //如果没有token，尝试从localStorage中获取，如果token为字符串空值也从localStorage中获取

            if(!this.token || this.token === 'null' || this.token === 'undefined') {
                const token2 = localStorage.getItem('token')
                //如果localstorage中也没有则返回null
                if(!token2 || token2 === 'null' || token2 === 'undefined') {
                    this.token = null,
                    this.email = null,
                    //删除存储桶中的email和token
                    localStorage.removeItem('email'),
                    localStorage.removeItem('token')
                } else {
                    this.token = localStorage.getItem('token'),
                    this.email = localStorage.getItem('email')
                }
                
            }
            return this.token

        }
    }
})

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia()) //启用全局状态管理
//导入pinia组件必须在app挂载pinia之后
import { useUserStore } from './store/user'; //导入用户store
const user = useUserStore(); //获取用户store
//指定url前缀
axios.defaults.baseURL = "http://127.0.0.1:80"
// axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.interceptors.request.use(
    config => {
        const token = user.getToken()
        //如果存在token则将它加入请求头
        if(token) {
            config.headers.Authorization = `Bearer ${token}`
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

app.provide("axios",axios) //全局共享axios

app.mount('#app')