app.config.globalProperties 全局 filter 使用方法

在幫舊專案由 Vue2 升版到 Vue3 的過程中，我有看到這樣的寫法：

{{ ref 變數 | $filters.comma.format }}，查了資料之後，知道這是 Vue2 filter 的寫法，在這裡是用來在全域統一數字的格式，當然也可以定義不同的方法統一處理全域的其他東西，例如取小數點 2 位、四捨五入之類的。

但是這樣的寫法 {{ ref 變數 | $filters.comma.format }} 在 Vue3 並不起作用喔，Vue3 的要做相同的事情要做另外的處理，在這裡我們要使用 plugin 的訪法來作。讓我來記錄一下要怎麼改才會生效。

Vue 官網中有提到：

plugin 沒有嚴格定義的使用範圍，但是插件發揮作用的常見場景主要包括以下幾種：

  1. 通過 app.component() 和 app.directive() 註冊一道多個全局組件或是自定義指令。
  2. 通過 app.provide() 使一個資源可被注入進整個應用。
  3. 向 app.config.globalProperties 中添加一些全局實例屬性或方法。
  4. 一個可能上述三種都包含的功能庫（例如  vue-router）。

在這裡我們要使用第三種方法 「向 app.config.globalProperties 中添加一些全局實例屬性或方法。」來定義全域統一數字格式的filter。

在 main.js 定義 filter 物件

我們在 main.js 統一使用 app.config.globalProperties 來設定 filter。

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
const app = createApp(App);
// 定義 filter 物件
app.config.globalProperties.$filters = {
 // 把要在全域中使用的 filter 放在這裡
};

app.mount('#app');

把 commaFormat(value) { } 放入 app.config.globalProperties.$filters = {} 中。

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
const app = createApp(App);
// 定義 filter 物件
app.config.globalProperties.$filters = {
  commaFormat(value) {
    if (value) {
      return value
        .toString()
        .replace(
          /^(-?\\d+?)((?:\\d{3})+)(?=\\.\\d+$|$)/,
          function (all, pre, groupOf3Digital) {
            return pre + groupOf3Digital.replace(/\\d{3}/g, ',$&');
          }
        );
    } else {
      return '0';
    }
  },
};

app.mount('#app');

在檔案的任何地方引用 filter

針對 count 這個 ref ，加上 $filters.commaFormat(count) ，裡面的數值會變成在千分位上加上逗點，這樣就可以在全域用 $filters.commaFormat() 來統一處理數字格式。

<script setup>
import { ref } from 'vue'

const count = ref(100300200)

</script>

<template>
// 直接引用 filter
 {{ $filters.commaFormat(count) }}
</template>

要注意的是不能用 filter 來改變 computed 的資料，只能適用於 methods 所生成的資料。

另外也可以把打 API 要使用的 header 寫在另外一個檔案，引入 main.js 以後，就可以全域引用 $setAuthorizationHeader：

import requestHelper from './requestHelper.js'

app.config.globalProperties.$setAuthorizationHeader =
  requestHelper.setAuthorizationHeader;

範例程式碼

參考資料

https://v3-migration.vuejs.org/zh/breaking-changes/filters.html