帶有 TypeScript 的 mapState 強迫我在 Vue 元件狀態屬性上使用 watch

Question

我正在嘗試在我的 TypeScript 編寫的 Vue 元件中使用 mapState。 如這裡所建議的：How to use mapState function in typescript語法當使用vuex時？ 我這樣做是為了實現它：

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

問題是我收到此錯誤：

「類型錯誤：無法讀取未定義的屬性（讀取「someTitle」）」

當我直接從商店取得狀態屬性（不使用mapState）時，我沒有收到任何錯誤：

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

此外，當我使用手錶時，我可以做到這一點：

title!: ''
...

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

但我發現這個解決方案冗長且可讀性較差，在我看來它錯過了整個 mapState 的想法。 我的問題是為什麼直接呼叫商店時我沒有收到錯誤，有沒有辦法讓我將 mapState 與計算屬性一起使用？

Answer 1

我發現了問題，我沒有將地圖嵌套在計算中。

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

這樣就一切正常了