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”将属性注入“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对象只会被修改

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

1 个答案: