【第21章】Vue实战篇之Pinia(状态管理库)

---

前言

在后端开发的时候，我们的拦截器排除了注册和登录接口，针对其他接口的调用需要提供token信息才能访问，我们需要在前端中保存token的状态，而Pinia是Vue核心团队开发的，也是目前官方推荐的，这就是我们Pinia的主要原因。

---

一、为什么你应该使用 Pinia？

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：

• Devtools 支持
  • 追踪 actions、mutations 的时间线
  • 在组件中展示它们所用到的 Store
  • 让调试更容易的 Time travel
• 热更新
  • 不必重载页面即可修改 Store
  • 开发时可保持当前的 State
• 插件：可通过插件扩展 Pinia 功能
• 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
• 支持服务端渲染

二、使用步骤

1.安装

npm install pinia

2.使用

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/router.js'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

3. 定义 Store

token.js

import { ref } from 'vue'
import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useTokenStore = defineStore('token', () => {
    const token = ref('')
    const getToken = ()=>{
        return token.value
    }
    const setToken = (t)=>{
        token.value=t
    }
    const removeToken = ()=>{
        token.value=''
    }
    return { getToken, setToken, removeToken }
})

4. 设置token

登录之后，我们调用store存储token信息

Login.vue

import { useTokenStore } from '@/stores/token.js'

const loginFormRef = ref(null)
const router = useRouter()
const tokenStore=useTokenStore()
const loginUser = async () => {
    let result = await loginService(registerData.value)
    let message = result.message
    if (result.code == 0) {
        ElMessage.success(message ? message : '登录成功!')
        tokenStore.setToken(result.data)
        //this.$router.push('/')//选项式
        router.push("/")//组合式
    } else {
        ElMessage.error(message ? message : '登录失败!')
    }
}

三、请求拦截器

在请求发送之前，添加请求头token

import {useTokenStore} from '@/stores/token.js';
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前添加请求头token
    const tokenStore=useTokenStore()
    if(tokenStore.getToken()){
        config.headers.Authorization='Bearer '+tokenStore.getToken()
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

四、状态持久化插件

1. 安装

npm install pinia-persistedstate-plugin

2. 使用

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/router.js'
import { createPinia } from 'pinia'
import {createPersistedState} from'pinia-persistedstate-plugin'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
const pinia = createPinia()
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)
app.use(pinia)
app.mount('#app')

3. 状态定义参数

import { ref } from 'vue'
import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useTokenStore = defineStore('token', () => {
    const token = ref('')
    const getToken = ()=>{
        return token.value
    }
    const setToken = (t)=>{
        token.value=t
    }
    const removeToken = ()=>{
        token.value=''
    }
    return { token,getToken, setToken, removeToken }
},{
    persist:true
})

这里token要涵盖在return范围内

五、未登录统一处理

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';
import {useTokenStore} from '@/stores/token.js';
import { ElMessage } from 'element-plus';
import router from '@/router/router.js';

//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前添加请求头token
    const tokenStore=useTokenStore()
    if(tokenStore.getToken()){
        config.headers.Authorization='Bearer '+tokenStore.getToken()
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        if(err.response.status==401){
            ElMessage.error('未登录,即将跳转到登陆界面');
            router.push('/login')
        }else{
            ElMessage.error('服务异常')
        }
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

---

总结

回到顶部
官方网站
持久化插件