从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战六（引入pinia，注册成功返回的信息在主页显示）

简介

pinia是多页面之间共享数据的一个组件，用法比较简单，具体参照以下。

安装Pinia

pnpm install pinia

引入Pinia

main.ts

新增store

src目录下新建stores目录，stores目录下新增user.ts文件

import { ref } from 'vue';
import { defineStore } from 'pinia';
import type { UserInfo } from '@/types';

export const useUserStore = defineStore('user', () => {
  const userInfo = ref<UserInfo | null>(null);
  const setUser = (user: UserInfo) => {
    userInfo.value = user;
  };
  return {
    userInfo,
    setUser,
  };
})

将注册成功返回的信息保存到store

首页读取store，显示用户信息

如果从store里读出的是数据，为了实现响应式就需要storeToRefs(userStore)，如果是函数，则无需调用storeToRefs(userStore)。

测试验证

首次访问首页时，看不到用户名；注册成功后，跳转到首页，可以看到显示了注册的用户名。

但如果此时我们按F5刷新页面，可以发现用户名又消失了，可见保存在pinia的store里的数据在页面刷新后丢失，这个问题如何解决，我们后续文章说。