vue.js - vue + typescript içinde mapState kullanımı

Yıllar sonra vue ile çalıştıktan sonra vue+vuex+typescript ile bir uygulama yazıyorum. Kavramları anlıyorum ama çok şey değişmiş!

Vuex mapState yardımcı fonksiyonunu kullanmaya çalışırken garip bir sorunla karşılaşıyorum. animationCanvas adında bir store modülüm var:

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

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

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

Ve bunu kök mağaza modülüme çekiyor ve kaydediyorum:

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

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

Bileşende mağazayı doğrudan $store özelliğinden çekerek kullandığımda sorunsuz çalışıyor:

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 {
...

Ama bunu mapState yardımcı fonksiyonu ile eklemeye çalıştığımda hiçbir şey alamıyorum:

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 {

Ve o modülün orada olduğunu ve doğru şekilde adlandırıldığını biliyorum, kısmen $store tarzı yolda çalıştığı için, ama aynı zamanda geliştirici araçlarında görebildiğim için de:

Belgelerde etrafa bakınıyordum ama tam olarak anlayamıyorum. Fikirlerin var mı?

Cevap #1

Kodunuzda Vuex modülünüzü isim alanına aldığınızı hiçbir yerde görmüyorum. TypeScript için sözdizimini bilmiyorum ama saf JS'te şöyle yapardınız

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

Bunu, bileşeninizde console.log(this.$store) yaparak ve nesnenin yapısını görerek kontrol edebilirsiniz. Getters içinde şöyle bir şeyiniz olmalıdır:

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