mapState dengan TypeScript memaksa saya menggunakan jam tangan pada harta keadaan komponen Vue

Question

Saya sedang mencuba ini pada TypeScript 编写的 Vue 组件中使用 mapState saya. Seperti yang dicadangkan di sini: Bagaimana untuk menggunakan fungsi mapState dalam sintaks skrip taip apabila menggunakan vuex? Saya melakukan ini untuk merealisasikannya:

<template>
  <SomeComponent
    :title="title">
  </SomeComponent>
</template>

<script lang="ts">

import Vue from 'vue'
...

const MyComponentProps = Vue.extend({ })

@Component({
  components: {
    SomeComponent,
    ...
  },
  ...mapGetters(['currentSubscription']),
  ...mapState({
    content: (state: RootState) => state.content,
  })
})
export default class MyComponent extends MyComponentProps {
  content!: ContentModel

get title () {
  this.content.someTitle
}

</script>

Masalahnya ialah saya mendapat ralat ini:

"TypeError: Tidak boleh membaca sifat yang tidak ditentukan (baca 'someTitle')"

Apabila saya mendapat atribut keadaan terus daripada kedai (tanpa menggunakan mapState), saya tidak mendapat sebarang ralat:

get title () {
  this.$store.state.content.someTitle
}

Juga apabila saya menggunakan jam tangan saya, saya boleh melakukan ini:

title!: ''
...

@Watch('content')
onPropertyChanged (value: ContentModel) {
  this.title = value.someTitle
}

Tetapi saya mendapati penyelesaian ini panjang dan kurang boleh dibaca, dan pada pendapat saya ia merindui keseluruhan mapState idea. Soalan saya ialah mengapa saya tidak mendapat ralat semasa menghubungi kedai secara terus, adakah cara untuk saya menggunakan mapState dengan harta yang dikira?

Answer 1

Saya jumpa masalahnya, saya tidak sarangkan peta di dalam 计算.

@Component({
  components: {
    SomeComponent,
    ...
  },
  computed { // <--- This line solved it
    ...mapGetters(['currentSubscription']),
    ...mapState({
      content: (state: RootState) => state.content,
    })
  }
})

Dengan cara ini semuanya akan menjadi normal