Comment résoudre le problème « TypeError : Impossible de lire la propriété 'xxx' de non définie » lors de l'utilisation de vuex dans l'application Vue ?

Utiliser Vuex dans les applications Vue est une opération très courante. Cependant, parfois lors de l'utilisation de Vuex, vous rencontrerez le message d'erreur « TypeError : Cannot read property 'xxx' of undefined ». Ce message d'erreur signifie que la propriété non définie « xxx » ne peut pas être lue, ce qui entraîne des erreurs de programme. La raison de ce problème est en fait évidente, car lors de l'appel d'une certaine propriété de Vuex, cette propriété n'est pas initialisée correctement.

La solution à ce problème est également très simple. Généralement, cette erreur est causée par le fait que la valeur Vuex n'est pas initialisée correctement, nous devons donc initialiser la variable. Voici deux exemples :

1. Utilisation de VueX dans le composant

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

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

Si nous utilisons le code ci-dessus dans le code, mais que l'attribut "name" n'est pas défini dans le Vuex Store, alors une erreur sera signalée : "TypeError : Impossible de lire la propriété 'name' de undefined. "Pour résoudre ce problème, il suffit d'ajouter la propriété name au Vuex Store et de l'initialiser.

2. Initialiser les variables dans Vuex Store

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

Dans le code ci-dessus, nous initialisons l'attribut "name" qui déclare uniquement une chaîne vide. De cette façon, l'erreur « TypeError : Cannot read property 'name' of undefined » n'apparaîtra pas lors de l'appel.

Pour résumer, cette erreur est très courante, mais elle est également très simple à résoudre. Il suffit de correctement initialiser les variables Vuex dans l'application. De cette façon, nous pouvons obtenir les valeurs correctes et mieux utiliser Vuex.

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!