간단한 Vuex 코드 검토 부탁 드립니다

Question

// Vue Component // store/index.js import { createStore } from 'vuex' export default createStore({ state: { list: [ 'Liar', 'Cookie', 'Attraction', 'Kiosk', 'Plain', 'Flour', 'Surrounds', 'Lord' ], filterList: [], }, getters: { search(state) { return (searchItem) => { return state.list.filter(ele => { return ele.toLowerCase().includes(searchItem.toLowerCase()) }) } } }, mutations: { filtered(state, searchItem) { state.filterList = state.list.filter(ele => { return ele.toLowerCase().includes(searchItem.toLowerCase()) }) }, reset(state) { state.filterList = state.list }, }, actions: {} }, })위 코드는 input 입력 값에 따라 필터 검색되는 코드입니다.store 부분에 중복되는 코드가 있어서 줄이고 싶은데 나름의 방법대로 수정해 보니 이상하게 동작하네요 😥아래 코드는 중복되는 부분의 코드입니다state.list.filter(ele => { return ele.toLowerCase().includes(searchItem.toLowerCase()) })구글링해도 이해가 되질 않아 생각대로 코드가 안 짜져서 도움 요청 드리게 되었습니다여기서 중복되는 코드를 어찌할 수 있는 방법이 따로 있을까요 ?해결했습니다!@input 으로 연결되어있는 함수 자체가 필요 없는 함수여서 삭제하니 제대로 동작했습니다 :)

하태연 · Accepted Answer

//return ele.toLowerCase().includes(searchItem.toLowerCase()) return ele.toLowerCase() &#61;&#61; searchItem.toLowerCase()ele 가 배열의 각 요소('Liar', 'Cookie', …)이기 때문에 includes가 아니라 값이 같은지 비교해야 제대로 나올 것 같습니다.

yeori · Answer

mutations 에 있는 메소드 filtered가 state.filterList안에다가 검색 결과를 캐시하고 있으니까 getters에 정의된 search는 없어도 될듯합니다.getters.search를 &#64;input에 바인딩해서 실시간으로 업데이트 하고 있는데,이미 v-model로 data.searchItem 변수에 바인딩한 후에 watch에서 매번 this.filtered를 호출하니까 &#64;input 바인딩을 제거해도 작동할가같습니다.

간단한 Vuex 코드 검토 부탁 드립니다

2개의 답변

Q&A 목록