source

VueX의 여러 스토어 어레이에서 일치하는 항목 검색

goodcode 2022. 9. 18. 21:34
반응형

VueX의 여러 스토어 어레이에서 일치하는 항목 검색

현재 스토어에 있는 어레이에서 하나의 아이템을 찾고 싶을 때 다음을 사용합니다.

this.matched = this.$store.state.itemlist.find(itemId=> {
      return itemId.id == "someid";
    });

제공된 ID와 일치하는 항목을 찾기 위해 여러 어레이를 검토해야 한다고 가정해 보십시오.내가 가진 것처럼itemlist1 itemlist2 itemgetter()...게터형 어레이도 있습니다만, 큰 변화는 없다고 생각합니다.따라서 기본적으로 위의 예시와 같이 이 컴포넌트의 다른 상태 및 getter 항목을 검색하는 것이 아니라 다른 상태로 검색합니다.

하나의 어레이에 그것이 존재하는지 확인하고 싶다면, 간단히 다음과 같이 함수를 쓸 수 있습니다.

function find(search,...arrs){
  return arrs.flat(1).find(item => item == search) 
}

이 함수는 모든 어레이를 하나의 긴 어레이로 병합하고 검색합니다.

사용 예

let a=[1,2,3,4]
let b=[5,6,7,8]
let c=[9,10,11,12]

let i=find(6,a,b)
console.log(i)

하나의 객체를 사용하여 모든 어레이를 그룹화함으로써 어레이를 반복할 수 있습니다.아이디어는 다음과 같습니다.

const store = new Vuex.Store({
 state: {
    itemsGroupArrays: {
      items1: [{ id: 1, text: "item1 - 1" }, { id: 2, text: "item1 - 2" }],
      items2: [{ id: 3, text: "item2 - 1" }, { id: 4, text: "item2 - 2" }]
    }    
  },
  getters: {
    getItemByIdFromStateGroupArrays: state => (id) => {
      let returnedItem = null;
      Object.values(state.itemsGroupArrays).forEach((itemStateArray) => {
        if (itemStateArray.some(item => item.id === id))  {
          returnedItem = itemStateArray.find(item => item.id === id);
        }
      })                
      return returnedItem;
    }
  }
});

언급URL : https://stackoverflow.com/questions/60250250/find-matching-item-across-multiple-store-arrays-in-vuex

반응형