Pinia持久化插件-persist

Pinia持久化插件-persist

Pinia默认是内存存储，当刷新浏览器的时候会丢失数据。
Persist插件可以将pinia中的数据持久化的存储。

使用方法：

安装persist npm install pinia-persistedstate-plugin
在pinia中使用persist
定义状态Store时指定持久化配置参数

具体操作：

在main.js中添加代码：

import { createPersistedState } from 'pinia-persistedstate-plugin'
//pinia的持久化插件persist的使用
const persist = createPersistedState();
pinia.use(persist);

修改token代码

//定义store
import { defineStore } from 'pinia'
import {ref} from 'vue'
/*
    第一个参数：名字，唯一性
    第二个参数：函数，（函数的内部可以定义状态的所有内容）返回一个对象（返回值就是函数），里面是状态和方法
    这里的状态和方法是可以直接在组件中使用的
 */
export const useTokenStore = defineStore('token',()=> {
    //定义状态的内容

    //1.响应式变量
    const token = ref(''); //token的状态

    // 2.定义一个函数，修改token的值
    const setToken = (newToken) => {
        token.value = newToken;
    }
    // 3.定义一个函数，移除token的值
    const removeToken = () => {
        token.value = '';
    }
    return {
        token,
        setToken,
        removeToken
    }
    
},{
    persist: true//持久化存储
});

未登录统一处理

在响应拦截器中进行处理，判断响应状态码是否为401，如果是401，提示用户登录
修改request.js的响应拦截器代码

import router from '@/router';
//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        //判断业务状态码
        if(result.data.code ===1){
            return result.data;
        }
        //操作失败
        // alert(result.data.msg?result.data.msg:'服务异常');
        ElMessage.error(result.data.msg?result.data.msg:'服务异常');
        return Promise.reject(result.data.msg);//异步的状态转化成失败的状态
    },
    err=>{
        //判断响应状态码，如果为401，则证明未登录，提示请登录，并跳转到登录界面
        if(err.response.status === 401){
            ElMessage.error('请先登录');
            router.push('/login');
        }else{
            //其他的错误提示
            ElMessage.error(err.response.data.msg?err.response.data.msg:'服务异常');
        }
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

添加文章分类

在AtricleCategory.vue中添加如下代码

<!-- 添加分类弹窗 -->
        <el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
            <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
                <el-form-item label="分类名称" prop="categoryName">
                    <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="分类别名" prop="categoryAlias">
                    <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addCategory"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>

给添加分类的按钮，添加一个单击事件

<div class="extra">
                    <el-button type="primary" @click="dialogVisible=true">添加分类</el-button>
                </div>

在ArticleCategory.vue中添加函数

//调用接口，添加表单
import { ElMessage } from 'element-plus'
const addCategory = async ()=>{
    //调用接口
    let result = await articleCategoryAddService(categoryModel.value);
    ElMessage.success(result.msg ? result.msg : '添加分类成功')
    //调用获取所有文章分类的函数
    articleCategoryList();
    //关闭弹窗
    dialogVisible.value = false;
}

在article.js中添加以下代码

//文章分类添加
export const articleCategoryAddService = (categoryData) => {
    return request.post('/category',categoryData)
}