在 Vue3 中使用过滤器但无法读取 globalProperties答案

【问题标题】：Use filter in Vue3 but can't read globalProperties在 Vue3 中使用过滤器但无法读取 globalProperties
【发布时间】：2021-04-03 21:46:27
【问题描述】：

只是一个简单的问题，

我知道 Vue3 不再使用过滤器，并且注释说使用计算或方法代替。还有一个我们可以使用的 globalProperties，我使用了这个 globalProperties 但一直收到这个错误

未捕获的类型错误：无法读取未定义的属性“globalProperties”

有人知道我的代码中的错误在哪里吗？

const app = {
data() {
    return {
        message: ""
    }
  }
}

app.config.globalProperties.$filters = {
formatDate(value) {

    if (value == "0001-01-01T00:00:00")
        return "";
    var today = new Date(value);
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();

    today = dd + '/' + mm + '/' + yyyy;
    return today;
   }
}

Vue.createApp(app).mount('#app');

我正在像这样在我的表中使用过滤器

    <td>
         {{ $filters.formatDate(incident.incidentData) }}
    </td>

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

config 字段属于 root instance 而不是 root component 所以你应该这样做：

const app = {
data() {
    return {
        message: ""
    }
  }
}
const myApp=Vue.createApp(app)

myApp.config.globalProperties.$filters = {
formatDate(value) {

    if (value == "0001-01-01T00:00:00")
        return "";
    var today = new Date(value);
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();

    today = dd + '/' + mm + '/' + yyyy;
    return today;
   }
}

myApp.mount('#app');

Vue.createApp(app)返回根实例

myApp.mount('#app'); 将根应用安装到元素后，它会返回根组件

【讨论】：