Vue-Pinia

目录

Pinia状态管理库

使用步骤

1、安装Pinia

2、在vue应用实例中使用pinia

3、在src/stores/token.js中定义stores

4、在组件中使用store

axios请求拦截器

代码实现

---

Pinia状态管理库

        Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态

        一般在登录时会产生一个token，在访问其他接口的时候要携带这个token才能成功访问。我们使用测试工具postman测试的时候可以直接在Header中携带token，但是我们在之前在学习vue的时候使用axios直接就访问了接口，这样除非是后端没有编写拦截器，否则是无法访问的。为了解决这个问题，让我们浏览器也可以成功访问拦截器生效的接口，我们就要使用到Pinia了。

你可以将pinia简单的理解为中转站，能让一个组件使用到另一个组件的东西

使用步骤

1、安装Pinia

在项目命令行下安装Pinia，指令：npm install pinia

2、在vue应用实例中使用pinia

 

3、在src/stores/token.js中定义stores

        这里使用const定义了token，但这并不代表它的值不可以改变了。const不可改变的是它的引用地址。在这个例子中， const token = ref(' ')中的token是一个引用变量，而不是原始值。这意味着你可以通过token,value来改变引用变量的值。

 

4、在组件中使用store

如：

        在登录时将生成的token放入生成的tokenStore中

//获取登录生成的token
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
 
 
//登陆接口
const login = async function(){
    let result = await userLoginService(registerData.value);
    ElMessage.success("登录成功");
 
    //将获取生成的token存储到pinia中
    tokenStore.setToken(result.data)
 
    router.push('/')
}

 然后在需要使用token验证的接口哪里从存储的store中取出来，赋值给响应头heanders就携带了token了

import request from '@/utils/request.js'
import {useTokenStore} from '@/stores/token.js'
 
 
export const categoryListService = function(){
    const tokenStore = useTokenStore();
    // tokenStore.token就是token
 
    //在pinia中定义的响应式数据都不需要加上.value
    return request.get('/category/list',{headers:{'Authorization':tokenStore.token}})
}

axios请求拦截器

        像上面的例子中，一个接口使用到token 就要方法里写调用tokenStore，然后再headers上加token。如果一堆接口都要使用，那么每一个接口中都要写这个一摸一样的逻辑，复用性极强。为了偷懒也为了代码的整洁美观，复用性高的代码片段我们想办法只写一次一劳永逸。为此要使用到请求拦截器，每次发起请求，直接拦截下来然后自动给你安上token。

        这个请求拦截器和我们之前学的响应拦截器很相似，只不过是没了result回调函数，取而代之的是一个config回调函数，这里面就是用在写在发起请求之前拦截下来做些什么。

代码实现        

//定制请求的实例
 
//导入axios  npm install axios
import axios from 'axios';
import { ElMessage } from 'element-plus';
 
//导入定义好的状态
import { useTokenStore } from '@/stores/token.js';
 
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api'
const instance = axios.create({baseURL})
 
//添加请求拦截器
instance.interceptors.request.use(
    config => {
        //添加token
        const tokenStore = useTokenStore();
        if(tokenStore.token){
            config.headers.Authorization = tokenStore.token;
        }
        return config;
    },
    err => {
        ElMessage.error('请求异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)
 
//添加响应拦截器
instance.interceptors.response.use(
    result => {
        if(result.data.code == 0){
            return result.data;
        }else{
            ElMessage.error(result.data.message ? result.data.message : '服务异常')
 
            //结束异步操作
            return Promise.reject(result.data);
        }
    },
    err => {
        ElMessage.error(result.data.message ? result.data.message : '服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)
 
 
export default instance;

 

注意：如果出现这个错误，不是代码的问题，是token过期了，重新登录一下就可以了

 

 

---

Pinia问题解决 - 补充

Pinia持久化插件 - perisist

使用pinia的时候会遇到一个bug，本来已经登录了，数据也显示出来了，但是当你刷新页面之后，又请求异常了

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

使用方法

• 安装persist：npm install pinia-persistedstate-plugin

• 在pinia中使用persist                                        

与其他不同，不是app使用，而是pinia使用

• 定义状态Store时指定持久化配置参数

//定义store
import {defineStore} from 'pinia'
import {ref} from 'vue'
 
//第一个参数：名字，唯一性
//第二个参数：函数的内部可以定义状态的所有内容
 
//返回值：函数
 
export const useTokenStore = defineStore('token',()=>{
    const token = ref('')
 
    const setToken = (newToken) =>{
        token.value = newToken;
    }
 
    const removeToken = () => {
        token.value=''
    }
 
    return {
        token,setToken,removeToken
    }
},{
    persist:true    //开启持久化存储
});

在使用token的这个地方使用persist：true开启持久化存储

这样刷新页面之后，pinia中存储的数据也不会消失了

未登录统一处理

现在使用的edge浏览器访问的接口，现在我们直接复制地址，用另一个浏览器打开

使用Chrome浏览器打开这个地址，我们发现还是停留在这个界面

        当我们访问这个地址的时候，由于在这个浏览器中没有登录过，也就没有token。我们所希望的是可以直接跳转到登录注册界面，让用户去登录生成token，总不能让用户自己在地址栏手动输入/login的url吧。

        响应拦截器是检查是否携带token的，因此我们要在这里做判断，判断是否为登录状态，如果不是，那么就重定向至登录界面

import router from '@/router'
 
//添加响应拦截器
instance.interceptors.response.use(
    result => {
        if(result.data.code == 0){
            return result.data;
        }else{
            ElMessage.error(result.data.message ? result.data.message : '服务异常')
 
            //结束异步操作
            return Promise.reject(result.data);
        }
    },
    err => {
 
        if(err.response.status === 401){
            ElMessage.error("请先登录");
            router.push('/login')
        }else{
            ElMessage.error(result.data.message ? result.data.message : '服务异常');
        }
 
        return Promise.reject(err);//异步的状态转化成失败的状态
    }