vue + typescript에서 mapState 사용

vue + typescript에서 mapState 사용

vue를 떠난 지 몇 년 만에 vue+vuex+typescript로 어플리케이션을 작성하고 있습니다.컨셉은 알겠는데 많이 바뀌었어!

vuex를 사용하려고 할 때 이상한 문제가 발생했습니다.mapState도우미 기능라는 스토어 모듈을 가지고 있습니다.animationCanvas:

import { Module } from 'vuex'
import { RootState } from '../types'
import { AnimationCanvasState } from './types'

const state: AnimationCanvasState = {
  frames: [],
}

export const animationCanvas: Module<AnimationCanvasState, RootState> = {
  state,
}

루트 스토어 모듈로 가져와 등록합니다.

import { createStore, StoreOptions } from 'vuex'
import { RootState } from './types'
import { animationCanvas } from '@/store/modules/AnimationCanvas'

const store: StoreOptions<RootState> = {
  modules: {
    animationCanvas,
  },
}

컴포넌트의 스토어를 사용하는 경우$store정상적으로 동작하는 속성:

import { Vue, Options } from 'vue-class-component';

@Options({
    name: 'Animation Canvas',
    computed: {
        frames() {
            return this.$store.state.animationCanvas.frames;
        },
    },
})
export default class AnimationCanvas extends Vue {
...

하지만, 제가 그것을 추가하려고 할 때mapState도우미 기능 아무것도 얻지 못했습니다.

import { Vue, Options } from 'vue-class-component';
import { mapState } from 'vuex';

@Options({
    name: 'Animation Canvas',
    computed: {
        ...mapState('animationCanvas', ['frames']),
    },
})
export default class AnimationCanvas extends Vue {

그리고 모듈이 거기에 있고 올바른 이름이 붙여진 것도 알고 있습니다.부분적으로는 이 모듈이 이 모듈로 동작했기 때문입니다.$store스타일 경로뿐만 아니라 개발 도구에서도 확인할 수 있기 때문입니다.

의사들을 찾아봤는데 잘 모르겠어요.좋은 생각 있어요?

코드 어디에도 Vuex 모듈의 이름이 붙어 있지 않습니다.typescript의 구문은 모르지만 일반 JS에서는 다음과 같이 할 수 있습니다.

const store = {
  modules: {
    animationCanvas: {
       namespaced: true,
       state: ...
    }
  }
}

다음을 수행하여 확인할 수 있습니다.console.log(this.$store)오브젝트의 구조를 확인할 수 있습니다.게터에는 다음과 같은 것이 필요합니다.

getters: {
   'animationCanvas/frames': ...
}

언급URL : https://stackoverflow.com/questions/68204127/using-mapstate-in-vue-typescript