前端Pinia状态管理库存储JWT令牌信息

前端Pinia状态管理库存储JWT令牌信息

---

Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态,
Pinia 是一个 Vue.js 的状态管理库，它提供了一种简单而强大的方式来管理应用程序的状态。Pinia 的设计灵感来自于 Vuex，但它更注重使用 Composition API、TypeScript 和更现代的 Vue 特性。以下是 Pinia 的一些特点和使用方式：

---

1.安装 Pinia：

代码如下：

npm install pinia

2.创建 Pinia 实例

main.js代码如下：在vue应用实例中使用pinia

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

---

3.创建和注册 Store：

src/stores/token.js代码如下：定义store

//定义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
    }
}
);

---

4.在组件中使用 Store：

Login.vue代码如下：在组件中使用store

//导入token状态
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();
//导入路由
import { useRouter } from 'vue-router'
const router = useRouter()

const login = async () => {
    //调用接口,完成登录
    let result = await userLoginService(registerData.value);
    ElMessage.success('登录成功')

    //把得到的token存储到pinia中
    tokenStore.setToken(result.data)

    //跳转到首页 路由完成跳转
    router.push('/')

}

//tokenstore.token  //获取状态值
//tokenStore .setToken()  //设置状态值
//tokenStore.removeToken()  //移除状态值

总结

Pinia 的一些关键特性：

基于 Composition API： Pinia 利用了 Vue 3 的 Composition API，提供了更灵活和强大的状态管理方式。可以使用 ref、reactive 等 Composition API 提供的功能来定义和操作状态。

零依赖： Pinia 本身几乎没有依赖，因此它是一个轻量级的库。这使得它成为一个在 Vue 3 项目中使用的简单而灵活的状态管理解决方案。

模块化： Pinia 支持将状态拆分为模块，每个模块都有自己的状态、操作和 getter。这种模块化的设计使得应用可以更好地组织和管理状态。

异步处理： Pinia 内置了对异步处理的支持，可以方便地处理异步操作，例如异步请求或定时器。

Devtools 集成： Pinia 集成了 Vue Devtools，使开发者能够轻松地调试和监控应用的状态。