vue3 封装全局公共computed方法

最新推荐文章于 2025-04-30 09:35:53 发布

小小程序员。

最新推荐文章于 2025-04-30 09:35:53 发布

阅读量745

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_39251620/article/details/136187124

版权

本文介绍了如何在Vue项目中创建全局computed方法，如formatAirPort，用于处理Vuex状态中的机场数据。在main.js中安装全局组件，并给出使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，创建一个名为globalComputed.js的文件

// 全局computed方法
/**
 * 使用formatAirPort(params)
 * 
 * 
 */
const Global = {
    install(app) {
        // 起始站
        app.config.globalProperties.formatAirPort = function () {
            return function (id) {
                if (!id) {
                    return "";
                } else {
                    return this.$store.state.airportSelect.options.filter((el) => el.airportCode == id)[0]?.airportApsn;
                }
            };
        }()
        // 航班类型
        app.config.globalProperties.formatWayBillType = function () {
            return function (id) {
                if (!id) {
                    return "";
                } else {
                    return this.$store.state.wayBillType.options.filter((el) => el.code == id)[0]?.name;
                }
            };
        }()
        // 航班性质
        app.config.globalProperties.formatFlightNature = function () {
            return function (id) {
                if (!id) {
                    return "";
                } else {
                    return this.$store.state.flightNature.options.filter((el) => el.code == id)[0]?.name;
                }
            };
        }()
    },
};

export default Global;

2，在主入口（main.js）安装该全局组件

import globalComputed from '@/utils/globalComputed'
app.use(globalComputed);

3，使用示例

vuex数据：[{“airportId”:“1”,“airportCode”:“XIY”,“airportIcao”:“”,“airportApsn”:“西安”,“cnName”:“西安咸阳国际机场”,“enName”:“”,“cityCode”:“”,“remark”:“”,“countryCode”:“”},{“airportId”:“2”,“airportCode”:“XNN”,“airportIcao”:“”,“airportApsn”:“西宁”,“cnName”:“西宁曹家堡机场”,“enName”:“”,“cityCode”:“”,“remark”:“”,“countryCode”:“”}],“datetime”:1708401151145}]

formatAirPort(params)//西安