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>