Pinia状态管理库

101 阅读1分钟

image.png

PINia的创建和1使用

image.png

pinia的使用

image.png

定义pinia中defineStore方法,存储需要的数据

image.png

//定义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
    }
},{
    persist:true
}   
);

使用存储的数据:

image.png

Pinia持久化插件---persist

image.png

image.png

image.png