programing

vuex에서 도우미 기능 사용

mytipbox 2023. 6. 7. 23:39
반응형

vuex에서 도우미 기능 사용

vuex 모듈에서 두 개의 서로 다른 소스에서 데이터(문서 및 즐겨찾기)를 가져오는데 문서를 루프하여 즐겨찾기를 문서에 할당해야 합니다.

이를 위해 vuex 모듈 외부에 재사용 가능한 기능을 만들었습니다.

const bindFavoriteToDocument = (documents, favorites) => {
  // reset selected favorites
  favorites.forEach(item => {
    item.selected = false
  })
  documents.forEach(item => {
    var favs =
    favorites.filter(f => {
      var filter = f.favoriteDocuments.filter(
        d => d.document === parseInt(item.id) && d.source.toLowerCase().trim() === item.agency.toLowerCase().trim()
      )
      return !!filter.length
    }) || []

    favs.forEach(item => {
      item.selected = true
    })

    item.favorites = favs
    item.favoriteIds = _.pluck(favs, 'id')
    item.active = false
  })
  return documents
}

즐겨찾기 개체가 모두 업데이트되면 문서에 할당된 즐겨찾기 목록을 새로 고치기 위해 이 함수를 호출합니다.

  deleteFavorite: async ({ dispatch, commit, rootGetters }, payload) => {
    const response = await remove(config.PORTAL_API + 'api/favorite/delete/' + payload.id, rootGetters.token)
    if (response) {
      await dispatch('getFavorites')
      const documents = bindFavoriteToDocument(rootGetters['document/documents'], rootGetters['document/favorites'])
      commit('setDocuments', documents)
    }
  }

즐겨찾기를 편집한 후 콘솔에 다음 오류가 표시됩니다.

오류: [vuex] 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 마십시오.

에서 문서 및 즐겨찾기의 새 복사본을 만들려면 어떻게 합니까?bindFavoriteToDocument그것이 직접적으로 가게 상태를 변형시키지는 않나요?

시도해 본 결과:

const bindFavoriteToDocument = (documents, favorites) => {
  let favoriteList = favorites
  let documentList = documents
  .
  .
  .
  return documentList
}

하지만 그것은 효과가 없었습니다.

그냥 돌연변이를 만들어서 전화할 것입니다.bindFavoriteToDocument이 경고를 피할 수 있도록 문서를 설정합니다.

  // in actions
  deleteFavorite: async ({ dispatch, commit, rootGetters }, payload) => {
    const response = await remove(config.PORTAL_API + 'api/favorite/delete/' + payload.id, rootGetters.token)
    if (response) {
      await dispatch('getFavorites')
      commit('bindFavoritesAndSetDocuments', { docs: rootGetters['document/documents'], favs: rootGetters['document/favorites'] } );
    }
  }

  //in mutations 
  bindFavoritesAndSetDocuments: (state, { docs, favs }) => {
      const documents = bindFavoriteToDocument(docs, favs);
      // set docs if necessary
  }

언급URL : https://stackoverflow.com/questions/51782442/using-helper-functions-in-vuex

반응형