使用pinia存储登录用户的全部个人信息

        使用pinia存储登录用户的全部个人信息，其应用场景如下：

        上图中，我们登录系统后，页面会展示用户姓名、角色、相关菜单等，这写信息需要在登陆时，就存起来。

        我们采用的方案是将用户个人信息存到pinia中。

目录

1、安装pinia

2、配置pinia到项目中

3、下载一个pinia持久化插件

4、在main.js中，令pinia使用该持久化插件

5、编写UserStore.js

注意

6、在登录成功时，将后端返回的用户信息存入UserStore.js中的user对象。

7、查看UserStore.js是否成功存入用户信息

结语

1、安装pinia

# 下载pinia的依赖到项目中
npm install pinia

2、配置pinia到项目中

3、下载一个pinia持久化插件

该持久化插件的作用：在前端页面刷新时，也不会丢失pinia中存储的数据。这一点十分必要。

//下载pinia持久化插件
npm install pinia-plugin-persistedstate

4、在main.js中，令pinia使用该持久化插件

5、编写UserStore.js

//本store，用于存储登录用户的所有个人信息user，以及操作user的方法

import {defineStore} from 'pinia'
import {ref,reactive} from 'vue'

//实例化一个存储信息的对象userStore
const userStore = defineStore(
    "userStore",
    ()=>{
        //userStore实例中的属性：userInfo对象
        const user = reactive(
            {
                id:0,
                username:"",
                password:"",
                role:"",
                avatar:""
            }
        )

        //userStore实例中的方法1：设置user对象
        const setUser = (newUser) => {
            //根据传入参数user的属性，修改上面的user
            user.id = newUser.id;
            user.username = newUser.username;
            user.password = newUser.password;
            user.role = newUser.role;
            user.avatar = newUser.avatar;
        }

        //userStore实例中的方法2：清除user对象的属性
        const clearUser = () => {
            user.id = 0;
            user.username = "";
            user.password = "";
            user.role = "";
            user.avatar = "";
        }

        return {
            user,
            setUser,
            clearUser
        }
    },
    {
        //persist 选项可以让 Pinia 存储的数据在页面刷新或会话结束后仍然保留。
        persist:true//意思是持久化
    }
)

//导出userStore
export default userStore

注意

        由于用const声明的属性，后期不可修改地址。因此我们在修改user时，是将user原来的所有属性一个个进行了重新赋值。而不是直接令user=newUser，因为这样会修改user对象所指向的地址。

6、在登录成功时，将后端返回的用户信息存入UserStore.js中的user对象。

7、查看UserStore.js是否成功存入用户信息

//获取到pinia的UserStore.js中的数据和方法
import userStore from "@/store/UserStore";
const userStoreInfo = userStore();
//下面我们可以通过userStoreInfo来获取其中的数据和方法（根据需求使用）
const user = userStoreInfo.user;
console.log(user)

查看控制台，可见此时个人信息成功存进了UserStore.js的user对象中，后续我们就可以在需要时，拿出来使用，进行页面渲染等操作。整个过程还是十分nice的。

结语

以上就是本篇文章的全部内容，喜欢的话可以留个免费的关注呦~~