Pinia及其优化：Vue状态管理的解决方案

pinia及其优化目录

1. pinia状态管理库

2. pinia的使用步骤

2.1 安装

2.2 使用pinia

2.3 定义store

2.4 使用store

3. axios请求拦截器（优化pinia）

3.1 问题缘由

3.2 优化方法

4. Pinia持久化插件-persist

4.1 安装

4.2 使用

1. pinia状态管理库

Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态，提升了Vue应用的可维护性和扩展性。

2. pinia的使用步骤

2.1 安装

通过 npm install pinia 安装Pinia库。

2.2 使用pinia

在 main.js 文件中，使用以下代码引入并使用Pinia：

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

2.3 定义store

在 src/stores/token.js 中定义store，例如：

import { defineStore } from 'pinia'
import { ref } from 'vue'
/* 
    第一个参数：名字，唯一性
    第二个参数：函数，函数的内容可以定义状态的所有内容

    返回值：函数
*/

export const useTokenStore = defineStore('token', () => {
    //定义状态的内容

    //1. 响应式变量
    const token = ref('')

    //2. 定义一个函数，修改token的值
    const setToken = (newToken) => {
        token.value = newToken;
    }

    //3. 函数，移除token的值
    const removeToken = () => {
        token.value = '';
    }

    return {
        token, setToken, removeToken
    }
})

2.4 使用store

在组件中导入store，并使用它的状态和方法：

//导入token状态
import { useTokenStore } from '@/stores/token.js'
//调用useTokenStore得到状态
const tokenStore = useTokenStore();
//tokenStore.token
//tokenStore.setToken()
//tokenStore.removeToken()

3. axios请求拦截器（优化pinia）

3.1 问题缘由

 每次都需要添加{ headers: { 'Authorization': tokenStore.token } }，太繁琐

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

//文章分类列表查询
export const articleCategoryListService = () => {
    const tokenStore = useTokenStore();
    //在pinia中定义的响应式数据，都不需要.value
    return request.get('/category', { headers: { 'Authorization': tokenStore.token } })
}

3.2 优化方法

在request.js中设置请求拦截器，统一处理添加token的逻辑：

import { useTokenStore } from '@/stores/token.js'
//添加请求拦截器
instance.interceptors.request.use(
    (config) => {
        //请求前的回调
        //添加token
        const tokenStore = useTokenStore();
        //判断有没有token
        if (tokenStore.token) {
            config.headers.Authorization = tokenStore.token;
        }
        return config;
    },
    (err) => {
        //请求错误的回调
        Promise.reject(err);
    }
)

优化后的代码

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

//文章分类列表查询
export const articleCategoryListService = () => {
    //const tokenStore = useTokenStore();
    //在pinia中定义的响应式数据，都不需要.value
    //return request.get('/category', { headers: { 'Authorization': tokenStore.token } })
    return request.get('/category')
}

4. Pinia持久化插件-persist

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

4.1 安装

安装persist：npm install pinia-persistedstate-plugin

4.2 使用

在pinia中使用persist（配置main.js）

import {createPersistedState} from'pinia-persistedstate-plugin' 
const persist = createPersistedState()
pinia.use(persist)

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

export const useTokenStore = defineStore('token', () => {
    //定义状态的内容...
}, {
    persist: true//持久化存储
})

笔记参考