Vue3: 巧用自定义全局属性，封装只为高效率

简介

要想减少重复性代码，少不了全局属性配置的问题，做这方面的模块封装。当然就是为了少敲点代码，以及为了后续需求变更的时候，我们只需要修改一处地方，而不需要在用到这个模块的页面都要改动一遍，这难道不是内耗，和浪费时间吗。

出于这个目的，再次深研了扩展全局属性

扩展全局属性

某些插件会通过 app.config.globalProperties 为所有组件都安装全局可用的属性。举例来说，

import axios from 'axios' 
declare module 'vue' { 
   interface ComponentCustomProperties {
      $http: typeof axios $translate: (key: string) => string
   } 
}
复制代码

我们可能为了请求数据而安装了 this.$http，或者为了国际化而安装了 this.$translate。为了使 TypeScript 更好地支持这个行为，Vue 暴露了一个被设计为可以通过 TypeScript 模块扩展来扩展的 ComponentCustomProperties 接口：

类型扩展的位置

我们可以将这些类型扩展放在一个 .ts 文件，或是一个影响整个项目的 *.d.ts 文件中。无论哪一种，都应确保在 tsconfig.json 中包括了此文件。对于库或插件作者，这个文件应该在 package.json 的 types 属性中被列出。

注意：这里的官方介绍，是为后续工具类或者组件封装做前期思路的准备

为了利用模块扩展的优势，我们需要确保将扩展的模块放在 TypeScript 模块 中。 也就是说，该文件需要包含至少一个顶级的 import 或 export，即使它只是 export {}。如果扩展被放在模块之外，它将覆盖原始类型，而不是扩展!

自定义组件封装

Vue3过滤器制作

关于 Vue2 中的过滤器，过滤器可以通俗理解成是一个特殊的方法，用来加工数据的。

而在 vue3 中，已经去掉了 filters 这个属性，但是我们的需求还是在的。而官网给的建议是可以通过写composition方法，来代替；

但是这样子的话，每次需要使用到类似过滤器的这个方法，都要进行导入，还是比较麻烦；索性在全局配置中，附加进去，如下：

在 main.js 中加上

 //vue3配置全局过滤器
app.config.globalProperties.$filters = {
  //formatTime过滤器的名称
  isPeriodEmpty(value: string) { // 实现一个字段为空返回--的过滤器
     return value || '--'
  },
};
复制代码

在组件中使用如下

<template #operation="scope"> 
{{ $filters.isPeriodEmpty(scope.row.abc) }} 
</template>
复制代码

但是这样做的话，ts语法会提示错误

image.png

为了解决这个问题，我们这里应用到了上文简介中我所提到的扩展全局属性 ComponentCustomProperties

image.png

从上文简介类型扩展的位置，tsconfig.json中

  "include": ["**/*.ts", "src/**/*.d.ts",
      "src/types/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
复制代码

包含的任意位置，添加vue.d.ts文件，并写入

// 扩展全局属性类型
declare module 'vue' {
    interface ComponentCustomProperties {
        $filters: {
            isPeriodEmpty: (value: string) => nay;
        };
    }
}
export {};
复制代码

保存即可，如图：

image.png