Wie kann das Problem „TypeError: Eigenschaft ‚xxx‘ von undefiniert kann nicht gelesen werden“ gelöst werden, wenn Vuex in einer Vue-Anwendung verwendet wird?

Die Verwendung von Vuex in Vue-Anwendungen ist ein sehr häufiger Vorgang. Bei der Verwendung von Vuex wird jedoch gelegentlich die Fehlermeldung „TypeError: Eigenschaft „xxx“ von undefiniert kann nicht gelesen werden“ angezeigt. Diese Fehlermeldung bedeutet, dass die undefinierte Eigenschaft „xxx“ nicht gelesen werden kann, was zu Programmfehlern führt. Der Grund für dieses Problem liegt eigentlich auf der Hand, denn beim Aufruf einer bestimmten Eigenschaft von Vuex wird diese Eigenschaft nicht korrekt initialisiert.

Die Lösung dieses Problems ist ebenfalls sehr einfach. Typischerweise wird dieser Fehler dadurch verursacht, dass der Vuex-Wert nicht korrekt initialisiert wurde, daher müssen wir die Variable initialisieren. Hier sind zwei Beispiele:

1. Verwendung von VueX in der Komponente

<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  
  export default {
    computed: {
      ...mapState(['name'])
    }
  }
</script>

Wenn wir den obigen Code im Code verwenden, das Attribut „name“ jedoch nicht im Vuex Store definiert ist, wird ein Fehler gemeldet: „TypeError : Eigenschaft „Name“ von undefiniert kann nicht gelesen werden. „Um dieses Problem zu lösen, müssen wir nur die Eigenschaft „Name“ zum Vuex Store hinzufügen und initialisieren.

2. Variablen im Vuex Store initialisieren

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: '' // 需要先进行初始化
  },
  mutations: {
    SET_NAME(state, name) { //进行更改，并重新赋值
      state.name = name
    }
  },
  actions: {
    setName({commit}, name) { //dispatch对应的方法
      commit('SET_NAME', name)
    }
  },
  getters: {
    name: (state) => {
      return state.name //getters同样需要返回一个指定的属性
    }
  }
})

export default store

Im obigen Code initialisieren wir das Attribut „name“, das nur eine leere Zeichenfolge deklariert. Auf diese Weise wird beim Aufruf nicht der Fehler „TypeError: Eigenschaft ‚Name‘ von undefiniert kann nicht gelesen werden“ angezeigt.

Zusammenfassend lässt sich sagen, dass dieser Fehler sehr häufig vorkommt, aber auch sehr einfach zu beheben ist. Sie müssen lediglich die Vuex-Variablen in der Anwendung ordnungsgemäß initialisieren. Auf diese Weise können wir die richtigen Werte erhalten und Vuex besser nutzen.

Das obige ist der detaillierte Inhalt vonWie kann das Problem „TypeError: Eigenschaft ‚xxx‘ von undefiniert kann nicht gelesen werden“ gelöst werden, wenn Vuex in einer Vue-Anwendung verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!