mapState avec TypeScript m'oblige à utiliser watch sur la propriété d'état du composant Vue

Question

J'essaye ça sur mon TypeScript 编写的 Vue 组件中使用 mapState. Comme suggéré ici : Comment utiliser la fonction mapState dans la syntaxe dactylographiée lors de l'utilisation de vuex ? J'ai fait ceci pour y arriver :

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

Le problème est que j'obtiens cette erreur :

"TypeError : Impossible de lire la propriété non définie (lire 'someTitle')"

Lorsque j'obtiens l'attribut state directement depuis le store (sans utiliser mapState), je n'obtiens aucune erreur :

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

De plus, lorsque j'utilise ma montre, je peux faire ceci :

title!: ''
...

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

Mais je trouve cette solution longue et moins lisible, et à mon avis elle passe à côté de l'ensemble mapState de l'idée. Ma question est la suivante : pourquoi je n'obtiens pas d'erreur lorsque j'appelle directement le magasin ? Existe-t-il un moyen pour moi d'utiliser mapState avec une propriété calculée ?

Answer 1

J'ai trouvé le problème, je n'ai pas imbriqué la carte à l'intérieur 计算.

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

De cette façon, tout sera normal