如何使用惯性vue3添加全局过滤器答案

【问题标题】：how to add global filter with inertia vue3如何使用惯性vue3添加全局过滤器
【发布时间】：2022-01-05 07:55:25
【问题描述】：

我在 Laravel 中使用 Inertia 和 Vue 3。我需要知道如何添加全局过滤器。

我尝试使用此referrance，但没有成功。

app.js

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({el, app, props, plugin}) {
        return createApp({render: () => h(app, props)})
            .use(plugin)
            .mixin({methods: {route}})
            .mount(el);
    },
});

【问题讨论】：

title 是过滤器吗？如果没有，请您显示您要添加的“过滤”内容。
@Rwd 我需要知道正确方法的任何过滤器

标签： laravel vuejs3 inertiajs

【解决方案1】：

正如您链接到的博文（以及 Vue.js 3 migration guide）中所述，过滤器已在 v3 的 Vue.js 中删除。迁移指南中的建议是添加一个全局属性。

您可以在示例中执行以下操作：

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({el, App, props, plugin}) {

        const app =  createApp({render: () => h(App, props)})
            .use(plugin)
            .mixin({methods: {route}});

        app.config.globalProperties.$filters = {
            currency(value) {
                return '$' + new Intl.NumberFormat('en-US').format(value)
            },
            // Put the rest of your filters here
        }

        app.mount(el);
    },
});

请注意，我已根据 vue 3 example in Intertia's documentation 将 setup 属性名称从 app 更新为 App。

然后您可以使用$filters 属性在您的代码中使用此“过滤器”：

<p>{{ $filters.currency(amount) }}</p>

【讨论】：