使用 TypeScript 在 Vue 3 中创建全局过滤器

Question

我正在关注此course on Udemy，但其内容已过时，因此我无法按照作者创建全局过滤器所遵循的相同步骤。

它看起来像来自 Vue 3 文档，filters are no longer supported。

我在这里尝试做的事情相当简单，只需将价格作为数字并将其作为字符串美元价格返回，例如：取100 并返回$100。

这对我不起作用。 我的main.ts 看起来像这样：

import { createApp } from "vue";
import { Vue } from 'vue-class-component';
import { viewDepthKey } from "vue-router";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.filter('price', function(input: number){
  if(isNaN(input)){
    return "-";
  }
  return '$' + input.toFixed(2);
})

createApp(App)
  .use(store)
  .use(router)
  .mount("#app1");

这是错误：

src/main.ts:8:5
TS2339: Property 'filter' does not exist on type 'VueConstructor<Vue<unknown, {}, {}>>'.
     6 | import store from "./store";
     7 |
  >  8 | Vue.filter('price', function(input: number){
       |     ^^^^^^
     9 |   if(isNaN(input)){
    10 |     return "-";
    11 |   }

这就是我尝试在模板中使用它的方式：

{{ item.product.price | price }}

有没有办法让它工作或者我应该使用一些computed property？

编辑后续问题：

我的班级是这样的：

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { IProductInventory } from "@/types/Product";
import format from "@/helpers/format";

@Options({
    name: "Inventory",
    components: {}
})
export default class Inventory extends Vue{
    inventory:IProductInventory[] = //Coming from an api call
}
</script>

谢谢！

Answer 1

在 Vue 3 中删除了过滤器选项，因此您可以使用计算属性返回一个带参数的函数：

    get formatPrice(): string{
        return (price)=>{
             if(isNaN(input)){
               return "-"
             }else{
              //return other value
              }
      }
   }

而不是{{ item.product.price | price }}，您将拥有：

{{ formatPrice(item.product.price) }}

Answer 2

在./helpers/filters.ts

const filters = {
  price(input: number) {
    if (isNaN(input)) {
      return "-";
    }
    return '$' + input.toFixed(2);
  }
}
export default filters;

在您创建应用的地方全局安装它...

import filters from './helpers/filters'

const app = createApp(App);
app.config.globalProperties.$filters = filters
app.mount('#app')

那就做吧

{{ $filters.price( price ) }}