MapState mit TypeScript zwingt mich dazu, die Zustandseigenschaft der Vue-Komponente „watch' zu verwenden

Question

Ich versuche das auf meinem TypeScript 编写的 Vue 组件中使用 mapState. Wie hier vorgeschlagen: Wie verwende ich die MapState-Funktion in der TypeScript-Syntax bei Verwendung von Vuex? Ich habe Folgendes getan, um es möglich zu machen:

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

Das Problem ist, dass ich diese Fehlermeldung erhalte:

„TypeError: Eigenschaft von undefiniert (read ‚someTitle‘) kann nicht gelesen werden“

Wenn ich das Statusattribut direkt aus dem Store erhalte (ohne MapState zu verwenden), erhalte ich keine Fehlermeldungen:

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

Auch wenn ich meine Uhr benutze, kann ich Folgendes tun:

title!: ''
...

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

Aber ich finde diese Lösung langwierig und weniger lesbar, und meiner Meinung nach verfehlt sie die gesamte mapState Idee. Meine Frage ist, warum ich keine Fehlermeldung erhalte, wenn ich den Shop direkt anrufe. Gibt es eine Möglichkeit für mich, mapState mit einer berechneten Eigenschaft zu verwenden?

Answer 1

我发现了问题，我没有将地图嵌套在计算中。

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

这样就一切正常了