동적 개체 정의에 대한 클리너 코드를 작성하십시오.

Question

저는 vue를 사용하고 검색 양식에 채워지는 내용에 따라 동적으로 생성되는 동적 axios GET 쿼리를 작성하려고합니다.

가 UPDATE : 알고 여기

<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 : e.targets.elements의 자바 스크립트 객체 참조에 의해 전달되기 때문에 원래 params 개체 만 수정됩니다