Que dois-je faire si « TypeError : Cannot read property 'xxx' of null » apparaît lors de l'utilisation de vuex dans une application Vue ?

Dans les applications Vue, il est très courant d'utiliser vuex pour la gestion de l'état. Cependant, certains problèmes surviennent parfois lors de l'utilisation de vuex, tels que « TypeError : Impossible de lire la propriété 'xxx' de null » et d'autres erreurs. Ce problème se produit généralement lors de l’utilisation d’une propriété dans l’état et que la valeur de la propriété est nulle ou indéfinie. Cet article explique comment résoudre ce problème.

1. Déterminer si l'attribut de state existe

Lorsque nous utilisons vuex, si un certain attribut est défini dans state, nous devons juger s'il existe avant de l'utiliser. Nous pouvons utiliser la méthode spéciale $store.getters fournie dans Vue, qui peut facilement obtenir les propriétés dans l'état et porter des jugements avant de les obtenir. Lorsque la propriété obtenue est nulle ou indéfinie, nous pouvons renvoyer une valeur par défaut ou effectuer le traitement correspondant.

Prenons l'exemple suivant :

Un nom d'utilisateur de propriété est défini dans l'état :

state: {
    username: null
},

Utilisez cette propriété dans le composant :

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

Lorsque la propriété est nulle ou non définie, la valeur par défaut ou "null" sera renvoyée.

2. Attribuer une valeur par défaut à l'état dans la mutation

Dans vuex, la mutation est la seule méthode qui peut modifier l'état. Nous pouvons attribuer des valeurs par défaut à l'état en mutation pour garantir que les propriétés en état ne sont pas nulles ou indéfinies. Lorsque nous appelons mutation, si l'attribut dans l'état est nul ou indéfini, nous lui attribuons la valeur par défaut ou le traitons en conséquence via mutation.

Prenons l'exemple suivant :

Définir un attribut nom d'utilisateur dans l'état :

state: {
    username: null
},

Attribuer une valeur par défaut au nom d'utilisateur en mutation :

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

Lorsque nous appelons mutation, si le nom d'utilisateur est nul ou indéfini, il sera attribué une valeur Est la valeur par défaut ou "null".

3. Utilisez la fonctionnalité de paramètre par défaut d'ES6

Dans ES6, nous pouvons utiliser la fonctionnalité de paramètre par défaut pour définir les valeurs par défaut des paramètres de méthode. Dans vuex, nous pouvons utiliser cette fonctionnalité pour garantir que les propriétés dans l'état ne sont pas nulles ou indéfinies.

Prenons l'exemple suivant :

Définir un attribut nom d'utilisateur dans l'état :

state: {
    username: null
},

Utiliser la fonctionnalité de paramètre par défaut d'ES6 dans la mutation :

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

Lorsque nous appelons mutation, si le nom d'utilisateur est nul ou indéfini, il sera Attribuez la valeur à la valeur par défaut ou "null".

Pour résumer, lorsque nous utilisons vuex dans une application Vue et que des problèmes tels que « TypeError : Impossible de lire la propriété 'xxx' de null » se produisent, nous pouvons déterminer si les propriétés de l'état existent et attribuer une valeur par défaut à l'état. dans la mutation , utilisez les fonctionnalités des paramètres par défaut d'ES6 et d'autres méthodes pour résoudre le problème. J'espère que cet article sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!