반응형
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
반응형
'programing' 카테고리의 다른 글
카메라 롤을 사용하려면 Info.plist에 NSPhotoLibraryUsageDescription 키가 있어야 합니다. (0) | 2023.06.07 |
---|---|
woocommerce_single_product_summary 후크에서 제목을 제거하는 방법은 무엇입니까? (0) | 2023.06.07 |
가능한 모든 어레이 초기화 구문 (0) | 2023.05.18 |
Xcode 스크립트 실행 빌드 단계 "설치할 때만 스크립트 실행" 옵션 (0) | 2023.05.18 |
Azure 함수에 대한 로그 수준 구성 (0) | 2023.05.18 |