vue3.0 pinia、 util公共方法的写法
gench.projectmanage.pc\src\pinia\index.ts
import { defineStore } from "pinia"; import { storage } from '../util/storage'; import { GetChargeTypes, GetTimeTypes, GetStatusTypes, GetRemindTypes, GetEmergencyLevelTypes,GetStatusColors } from '../api/enumsRequest' export const useDict = defineStore("dict", { state: () => { return { chargeTypes: storage.get("project_manage_chargeTypes", []), timeTypes: storage.get("project_manage_timeTypes", []), statusTypes: storage.get("project_manage_statusTypes", []), remindTypes: storage.get("project_manage_remindTypes", []), emergencyLevelTypes: storage.get("project_manage_emergencyLevelTypes", []), statusColor: storage.get("project_manage_statusColor", []), }; }, getters: { getChargeTypes(): any { return this.chargeTypes; }, getTimeTypes(): any { return this.timeTypes; }, getStatusTypes(): any { return this.statusTypes; }, getRemindTypes(): any { return this.remindTypes; }, getEmergencyLevelTypes(): any { return this.emergencyLevelTypes; }, getStatusColor(): any { return this.statusColor; }, }, actions: { setChargeTypes(chargeTypes: any) { this.chargeTypes = chargeTypes.data.results; storage.set('project_manage_chargeTypes', this.chargeTypes); }, setTimeTypes(timeTypes: any) { this.timeTypes = timeTypes.data.results; storage.set('project_manage_timeTypes', this.timeTypes); }, setStatusTypes(statusTypes: any) { this.statusTypes = statusTypes.data.results; storage.set('project_manage_statusTypes', this.statusTypes); }, setRemindTypes(remindTypes: any) { this.remindTypes = remindTypes.data.results; storage.set('project_manage_remindTypes', this.remindTypes); }, setEmergencyLevelTypes(emergencyLevelTypes: any) { this.emergencyLevelTypes = emergencyLevelTypes.data.results; storage.set('project_manage_emergencyLevelTypes', this.emergencyLevelTypes); }, setStatusColor(statusColor: any) { this.statusColor = statusColor.data.results; storage.set('project_manage_statusColor', this.statusColor); }, async init(){ this.setChargeTypes(await GetChargeTypes()); this.setTimeTypes(await GetTimeTypes()); this.setStatusTypes(await GetStatusTypes()); this.setRemindTypes(await GetRemindTypes()); this.setEmergencyLevelTypes(await GetEmergencyLevelTypes()); this.setStatusColor(await GetStatusColors()); }, }, });
gench.projectmanage.pc\src\util
storage.ts
export default class Storage { private getKey(key: string) { return key.toUpperCase(); } set(key: string, value: any) { const stringData = JSON.stringify({ value: value, }); localStorage.setItem(this.getKey(key), stringData); } get(key: string, def: any = null) { const item = localStorage.getItem(this.getKey(key)) if (item) { try { const data = JSON.parse(item); const { value } = data; return value; } catch (e) { return def; } } return def; } } export const storage = new Storage();
request.ts 请求
import axios from "axios"; import { notification } from 'ant-design-vue'; //创建axios实例 const request = axios.create(); // 添加请求拦截器 request.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 request.interceptors.response.use( function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 if (response.data.error) { notification.open({ message: '错误信息提示', description: response.data.error.displayInfo, duration: 0, }); } return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 // ElMessage({ // type: "error", // message: error.message, // grouping: true, // }); return Promise.reject(error); } ); export default request;
util.ts 写公共方法
export default class colorUtil { // public randomColors = ["#f5222d", "#fa541c", "#fa8c16", "#faad14", "#fadb14", "#a0d911", "#52c41a", "#13c2c2", "#1677ff", "#2f54eb", "#722ed1", "#eb2f96"] public randomColors = ["#13c2c2"] //随机颜色 public getRandomColor() { return this.randomColors[Math.floor(Math.random() * this.randomColors.length)]; } }
公共方法的使用
import colorUtil from "../util/util";
<a-avatar :style="{ backgroundColor: colorUtils.getRandomColor() }"> {{ charge.fapUserName[0] }} </a-avatar>
给心灵一个纯净空间,让思想,情感,飞扬!