vue3 封装全局公共computed方法

最新推荐文章于 2024-04-22 10:36:37 发布

小小程序员。

最新推荐文章于 2024-04-22 10:36:37 发布

阅读量543

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39251620/article/details/136187124

版权

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

摘要由CSDN通过智能技术生成

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}]