[TIL] (오류) vue store의 action에서 data list를 새로 받아올 때 특정 값을 가진 data만 들어옴

문제의 발단

기존의 데이터 list를 보여주는 multiselect가 존재하는 페이지가 있다.

데이터를 신규 등록하는 버튼을 만들고, 신규 등록 중인 상태를 취소하는 버튼을 만들었다.

신규 등록을 취소하면 store에서 api 호출로 데이터를 새로 받아오도록 하고 싶었다.

그래서 아래처럼 적었다.

    onCancelClick () { // 취소 버튼 클릭 시
      this.actList({ params: this.params, menuAuth: this.checkMenuAuth('authList') })
    } // actList라는 action 실행

그리고...

가져오는 데이터(객체)에는 active: true 인 항목이 있었다.(활성화 여부)

화면에는 active 값을 변경시켜주는 radio가 존재하고(true / false)

결과적으로 활성화에 체크하면 multiselect의 v-model에 active가 true인 데이터만 들어오고,

비활성화에 체크하면 active가 false인 데이터만 들어왔다.

 

활성화 여부와 상관 없이 둘다 가져와야 했는데 말이다...

 

선임분께 여쭤보니 저 params의 this.params가 문제라고 하셨다.

actList가 동작할 때 this.params에 active 값이 담기기 때문에, active 값에 따라서 들어오는 params가 달라진 것이었다.

 

action을 이렇게 쓰는 게 처음이긴 하지만(dispatch...) 낯선 형태라고 해도 너무 헤맨 것 같아 아쉬웠다.

삽질의 연속이다...