Was soll ich tun, wenn bei der Verwendung von Vuex in einer Vue-Anwendung „TypeError: Cannot read property ‚xxx' of null' angezeigt wird?

In Vue-Anwendungen wird häufig Vuex für die Zustandsverwaltung verwendet. Bei der Verwendung von vuex treten jedoch manchmal Probleme auf, z. B. „TypeError: Die Eigenschaft ‚xxx‘ von null kann nicht gelesen werden“ und andere Fehler. Dieses Problem tritt normalerweise auf, wenn eine Eigenschaft im Status verwendet wird und der Wert der Eigenschaft null oder undefiniert ist. In diesem Artikel erfahren Sie, wie Sie dieses Problem lösen können.

1. Bestimmen Sie, ob das Statusattribut vorhanden ist.

Wenn wir Vuex verwenden und ein bestimmtes Attribut im Status definiert ist, müssen wir vor der Verwendung beurteilen, ob es vorhanden ist. Wir können die in Vue bereitgestellte spezielle Methode $store.getters verwenden, mit der die Eigenschaften im Bundesstaat problemlos abgerufen und vor dem Abruf beurteilt werden können. Wenn die erhaltene Eigenschaft null oder undefiniert ist, können wir einen Standardwert zurückgeben oder eine entsprechende Verarbeitung durchführen.

Nehmen Sie das folgende Beispiel:

Ein Eigenschaftsbenutzername ist im Status definiert:

state: {
    username: null
},

Verwenden Sie diese Eigenschaft in der Komponente:

<template>
    <div>
        <p>{{ $store.getters.username || '默认值' }}</p>
    </div>
</template>

Wenn die Eigenschaft null oder undefiniert ist, wird der Standardwert oder „null“ zurückgegeben.

2. Zustand in Mutation Standardwert zuweisen

In Vuex ist Mutation die einzige Methode, die den Zustand ändern kann. Wir können dem Status in der Mutation Standardwerte zuweisen, um sicherzustellen, dass die Eigenschaften im Status nicht null oder undefiniert sind. Wenn wir Mutation aufrufen und das Attribut im Status null oder undefiniert ist, weisen wir es dem Standardwert zu oder behandeln es entsprechend durch Mutation.

Nehmen Sie das folgende Beispiel als Beispiel:

Definieren Sie ein Attribut „Benutzername“ im Status:

state: {
    username: null
},

Weisen Sie dem Benutzernamen in der Mutation einen Standardwert zu:

mutations: {
    setUsername(state, username) {
        state.username = username || '默认值';
    }
}

Wenn wir Mutation aufrufen und der Benutzername null oder undefiniert ist, wird er zugewiesen ein Wert Ist der Standardwert oder „null“.

3. Verwenden Sie die Standardparameterfunktion von ES6

In ES6 können wir die Standardparameterfunktion verwenden, um Standardwerte für Methodenparameter festzulegen. In Vuex können wir diese Funktion verwenden, um sicherzustellen, dass Eigenschaften im Status nicht null oder undefiniert sind.

Nehmen Sie das folgende Beispiel als Beispiel:

Definieren Sie ein Attribut Benutzername im Status:

state: {
    username: null
},

Verwenden Sie die Standardparameterfunktion von ES6 in Mutation:

mutations: {
    setUsername(state, username = '默认值') {
        state.username = username;
    }
}

Wenn wir Mutation aufrufen und der Benutzername null oder undefiniert ist, wird dies der Fall sein Weisen Sie den Wert dem Standardwert oder „null“ zu.

Zusammenfassend lässt sich sagen, dass wir, wenn wir vuex in einer Vue-Anwendung verwenden und Probleme wie „TypeError: Eigenschaft ‚xxx‘ von null kann nicht gelesen werden“ auftreten, feststellen können, ob die Eigenschaften des Zustands vorhanden sind, und dem Zustand einen Standardwert zuweisen können Verwenden Sie in der Mutation die Standardparameterfunktionen von ES6 und andere Methoden, um das Problem zu lösen. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn bei der Verwendung von Vuex in einer Vue-Anwendung „TypeError: Cannot read property ‚xxx' of null' angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!