javascript - 为动态对象定义编写更清晰的代码

Question

我正在使用 vue 并尝试实现动态 axios GET 查询，该查询将根据搜索表单中填写的内容动态生成。现在我在单个文件组件中有这个方法:

更新:

<template lang="pug">
    div
        form(@submit.prevent="search")
            input(type='text', name="user_seq_id", placeholder="Customer ID")
            input(type='text', name="registered", placeholder="Registration date")
            input(type='text', name="email", placeholder="E-Mail")
            input(type='text', name="organization", placeholder="Organization")
            input(type='text', name="firstname", placeholder="Firstname")
            input(type='text', name="lastname", placeholder="Lastname")
            button(type="submit") Submit
</template>

<script>
    export default {
        data () {
            return {
            }
        },
        methods: {
            search(e) {
                let user_seq_id = e.target.elements.user_seq_id.value,
                    registered = e.target.elements.registered.value,
                    email = e.target.elements.email.value,
                    organization = e.target.elements.organization.value,
                    firstname = e.target.elements.firstname.value,
                    lastname = e.target.elements.lastname.value,
                    params = {
                        filter: 'role',
                        role: 'User',
                        sort: 'registered|desc'
                    }

                if ( user_seq_id ) {
                    _.set(params, 'user_seq_id', user_seq_id)
                    params.filter = params.filter + ',user_seq_id'
                }
                if ( registered ) {
                    _.set(params, 'registered', registered)
                    params.filter = params.filter + ',registered'
                }
                if ( email ) {
                    _.set(params, 'email', email)
                    params.filter = params.filter + ',email'
                }
                if ( organization ) {
                    _.set(params, 'organization', organization)
                    params.filter = params.filter + ',organization'
                }
                if ( firstname ) {
                    _.set(params, 'firstname', firstname)
                    params.filter = params.filter + ',firstname'
                }
                if ( lastname ) {
                    _.set(params, 'lastname', lastname)
                    params.filter = params.filter + ',lastname'
                }

                this.$store.commit('users', null)

                return this.$axios.get('/users', {
                        params: {
                            filter: 'role',
                            role: 'User',
                            sort: 'registered|desc'
                        }
                    })
                    .then( ({ data, headers, request, status, statusText }) => {
                        return this.$store.commit('users', data.result)
                    })
            }
        }
    }
</script>

这里有人知道以某种方式简化这个吗？我发现每次都重复自己的话很麻烦，而且我确信有更好的方法来做到这一点。如您所见，我使用“lodash”将属性注入(inject)“param”对象。

提前致谢!!!

Answer 1

由于您只想重构代码，因此我不考虑您用于设置params的逻辑。

你可以试试这个:

methods:{
   search(e) {

        let data = {
            user_seq_id: e.target.elements.user_seq_id.value,
            registered: e.target.elements.registered.value,
            email: e.target.elements.email.value,
            organization: e.target.elements.organization.value,
            firstname: e.target.elements.firstname.value,
            lastname: e.target.elements.lastname.value
       };

       let params = {
                filter: 'role',
                role: 'User',
                sort: 'registered|desc'
          };

    Object.keys(data).forEach((key) => {
        if(data[key]){
            this.modifyParams(params, key, data[key]);
        }
    });


        this.$store.commit('users', null)

        this.$axios.get('/users', {
            params: params
        })
        .then( ({ data, headers, request, status, statusText }) => {
            return this.$store.commit('users', data.result)
        })

    },
     modifyParams(obj, key, value){
        _.set(obj, key, value)
            obj.filter = obj.filter + ',' + key;
    }


}

PS:由于在 JavaScript 中对象是通过引用传递的，因此原始 params 对象只会被修改