濮阳网站网站建设高质量外链平台

        使用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的属性，修改上面的useruser.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的。

结语

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