MapState mit TypeScript zwingt mich dazu, die Zustandseigenschaft der Vue-Komponente „watch' zu verwenden
P粉633733146
P粉633733146 2024-03-30 23:46:45
0
1
425

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?

P粉633733146
P粉633733146

Antworte allen(1)
P粉976488015

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

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

这样就一切正常了

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!