반응형
Vuex 상태가 어레이를 개체로 반환하는 이유
Typecript + vue + vuex를 사용하는 경우 상태는 다음과 같이 정의됨
const state: CommonDataState = {
clients: [],
version: 1
}
게이터는
const getters: GetterTree<CommonDataState, RootState> = {
getClients: state=> () => { return state.clients; },
getClientById: state => (id: string) => { return state.clients.filter(x => true)[0]; },
getVersion: state => (): Number => { return state.version; }
}
getter getClientById를 호출하는 동안
렌더 오류: "TypeError: state.client.필터가 함수가 아님"
console.log()를 사용하여 state.clients를 인쇄하면 결과가 어레이 유형이 아닌 어레이로 기본 속성을 가진 개체임을 나타냄
{__esModule: true, __ob__: Observer}
default : Array(15)
__esModule : true
__ob__ : Observer {value: {…}, dep: Dep, vmCount: 0}
get default : ƒ reactiveGetter()
set default : ƒ reactiveSetter(newVal)
__proto__ : Object
기본값은 올바른 배열입니다.하지만 내가 Getter를 로 바꾸려고 할 때
getClientById: state => (id: string) => { return state.clients.default.filter(x => true)[0]; },
그것은 오류를 반환한다.
[ts] 속성 'default'가 'Client[]' 유형에 없음
그렇다면, 이 오류를 일으킨 원인이 무엇이었는지 아는 사람이 있는가? 그리고 그에 대한 해결책은 무엇인가?
이 구조로 변경 시도
import { GetterTree, Getter } from 'vuex'
import { State } from './index'
const cartProducts: Getter<State, any> = (state: State) => {
return state.cart.added.map(shape => {
// ...
})
}
const getterTree: GetterTree<State, any> = {
cartProducts
}
export default getterTree
참조URL: https://stackoverflow.com/questions/50753530/why-vuex-state-return-array-as-an-object
반응형
'Programing' 카테고리의 다른 글
특정 인덱스에서 v-for 루프를 시작하는 방법 (0) | 2022.04.12 |
---|---|
Vue의 상위 레이아웃에 전달되는 하위 뷰 구성 요소 (0) | 2022.04.12 |
Vue / Typecript, got Module ''*.vue'에 내보낸 멤버가 없음 (0) | 2022.04.12 |
좋은 테이블에서 선택한 행의 데이터를 가져오다. (0) | 2022.04.12 |
두 어레이를 반복하고 데이터 결합 (0) | 2022.04.11 |