config.globalProperties 组件中引入报错TypeError: proxy.xxx is not a function

vue3中使用app.config.globalProperties设置全局属性

步骤:

1. 在main.js文件中配置

const app = createApp(App)
// 配置一个全局处理数据的方法
app.config.globalProperties.$filters = {
  formatNumber: (val) => {
    return val.toFixed(2)
  }
}

2. 在组件中使用

<template>
<div>
   {{ $filters.formatNumber(6666.777) }}
 </div>
</template>

在template中使用没问题

但是在setup中使用就报错

报错写法:

<script>
import { getCurrentInstance } from "vue";

export default {
  name: "user",
  setup() {

    const { proxy } = getCurrentInstance();

      console.log(1, proxy.formatNumber(6666.777));

    return {
    };
  },
};
</script>

通过打印proxy发现里面并没有 formatNumber 方法,

打印 getCurrentInstance() ,发现 appContext 中有这个方法

 

换一个写法:

<script>
import { getCurrentInstance } from "vue";

export default {
  name: "user",
  setup() {
    const { appContext } = getCurrentInstance();

      console.log(
        1,
        appContext.config.globalProperties.$filters.formatNumber(6666.777)
      );

    return {
    };
  },
};
</script>

这样就可以了