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

Posted 2023-03-16

【中文标题】如何使用惯性vue3添加全局过滤器

【英文标题】：how to add global filter with inertia 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 我需要知道正确方法的任何过滤器

【参考方案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>