Programing

Vuex 상태가 어레이를 개체로 반환하는 이유

c10106 2022. 4. 12. 18:45
반응형

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

반응형