動的オブジェクト定義のためのクリーナーコードを書く

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のJavaScriptでのオブジェクトは参照渡しされているので、元のparamsオブジェクトのみが変更されます