Pinia

TIP

Pinia 符合直觉的 Vue.js 状态管理库,是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

相关文档：pinia 官网

相关文档：vuex 3.x 官网

安装

yarn add pinia
# 或者使用 npm
npm install pinia

全局引入挂载

页面模块已做全局自动引入:main.ts

// 状态管理库
import pinia from '/@/stores/index';

// 挂载
const app = createApp(App);
app.use(pinia).mount('#app');

[扩展] Vite多模块导入方式 import.meta.globEager

const modulesFiles = import.meta.globEager("./modules/*.ts");
const pathList: string[] = [];

for (const path in modulesFiles) {
  pathList.push(path);
}

const modules = pathList.reduce(
  (modules: { [x: string]: any }, modulePath: string) => {
    const moduleName = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/, "$1");
    const value = modulesFiles[modulePath];
    modules[moduleName] = value.default;
    return modules;
  },
  {}
);

创建Pinia

文件：stores/index.ts

// https://pinia.vuejs.org/
import { createPinia } from 'pinia';

// 创建
const pinia = createPinia();

// 导出
export default pinia;

使用Pinia

• 编写用户存储：stores/userInfo.ts 结合Session
• 获取对象的方式是先Session胡获取，这样防止页面刷新丢失数据

import { defineStore } from 'pinia';
import { Session } from '/@/utils/storage';
/**
 * 用户信息
 * @methods setUserInfos 设置用户信息
 */
export const useUserInfo = defineStore('userInfo', {
	state: (): UserInfosState => ({
		userInfos: {
			userName: '',
			photo: '',
			time: 0,
			email:'',
			phoneNumber: '',
			sex: '',
			loginIp:'',
			loginDate:'',
			roleName:'',
			roles: [],
			authBtnList: [],
		},
	}),
	actions: {
		async setUserInfos() {
			// 存储用户信息到浏览器缓存
			if (Session.get('userInfo')) {
				this.userInfos = Session.get('userInfo');
			} else {
				const userInfos=Session.get('userInfo');
				this.userInfos = userInfos;
			}
		},
	},
});

1. 保存数据

import pinia from '/@/stores/index';
import { useUserInfo } from '/@/stores/userInfo';

//放入Session
Session.set('userInfo',{xxxxx:"xxxxxx"});

//触发初始化用户信息 pinia
useUserInfo().setUserInfos()

2. 使用数据

import { useUserInfo } from '/@/stores/userInfo';

//获取userInfo存储对象
const stores = useUserInfo();
//继续获取userInfo存储对象中的: userInfos
const { userInfos } = storeToRefs(stores);

<span>{{userInfos.userName}}</span>