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

Lors de l'utilisation de vuex dans les applications Vue, nous rencontrons souvent l'erreur "TypeError : Impossible de lire la propriété 'xxx' de undefined". L'apparition de cette erreur est généralement liée à la structure logique du code, à la définition du module vuex et de son état, à la méthode appelante, etc. Cet article explique en détail comment dépanner et résoudre cette erreur lorsqu'elle se produit.

1. Causes et dépannage des erreurs

1. Aucune fonction auxiliaire telle que mapState n'est utilisée

Lors de l'utilisation de vuex, nous devons utiliser des fonctions auxiliaires telles que mapState, mapGetters, mapMutations, mapActions, etc. magasin. Si nous n'utilisons pas ces fonctions auxiliaires, mais écrivons manuellement le code pour lire l'état dans le magasin, des erreurs telles que "TypeError : Impossible de lire la propriété 'xxx' de undefined" se produiront facilement.

Méthode de dépannage : vérifiez s'il existe un code manuscrit permettant de lire l'état du magasin dans le code. Si tel est le cas, envisagez d'utiliser une fonction auxiliaire pour le remplacer.

2. Accéder aux modules non définis ou aux états correspondants

Si nous définissons un module dans Vuex et utilisons un certain état dans le module dans un composant, mais que le module défini n'est pas chargé ou que l'état est chargé S'il n'est pas initialisé, un une erreur telle que « TypeError : Impossible de lire la propriété 'xxx' de non définie" se produira.

Méthode de dépannage : vérifiez si le composant accède correctement au module vuex requis et assurez-vous que le module a été défini et initialisé avant d'utiliser le composant.

3. Utilisez store.state.xxx et le magasin lui-même n'est pas défini

Si vous utilisez store.state.xxx dans un composant et que le magasin lui-même n'est pas défini, "TypeError : Impossible de lire la propriété 'xxx' de non défini" apparaîtra erreur.

Méthode de dépannage : vérifiez le code qui fait référence au magasin dans le composant pour vous assurer que le magasin a été correctement instancié.

4. La requête asynchrone n'a pas renvoyé de données, provoquant l'échec du statut d'accès

Si nous effectuons une requête asynchrone dans Vuex, mais accédons au statut avant que la requête ne renvoie des données, "TypeError : Impossible de lire la propriété 'xxx' apparaîtra d'erreur "indéfinie".

Méthode de dépannage : assurez-vous que les données de requête asynchrone pertinentes ont été obtenues avant d'accéder au statut vuex.

2. Solution

1. Utilisez des fonctions auxiliaires telles que mapState

Utilisez des fonctions auxiliaires telles que mapState dans l'attribut calculé du composant, comme indiqué ci-dessous :

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      xxx: state => state.xxx
    })
  }
}

2. Accédez correctement au module et à l'état correspondant

Make. assurez-vous que le module est dans Le composant a été défini et initialisé avant :

const myModule = {
  state: {
    xxx: 'xxx'
  },
  mutations: {},
  actions: {},
  getters: {}
}

export default new Vuex.Store({
  modules: {
    myModule
  }
})

Utilisez un état dans le module dans le composant :

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      xxx: state => state.myModule.xxx
    })
  }
}

3. Assurez-vous que le magasin a été correctement instancié

Initialisez correctement le magasin dans le principal. js :

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store/index'

Vue.use(Vuex)

new Vue({
  store,
  //...
})

4. Assurez-vous que les données de la requête asynchrone ont été obtenues avant d'accéder au statut vuex

comme indiqué ci-dessous :

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      xxx: state => state.xxx
    })
  },
  created() {
    // 异步请求获取数据
    this.$http.get('/xxx').then(res => {
      // 将数据提交到vuex store中
      this.$store.commit('SET_X', res.data)
    }).catch(err => {})
  }
}

Résumé :

Ce qui précède est le dépannage et la solution lorsque vous rencontrez le "TypeError: Cannot lire la propriété 'xxx' de l'erreur "indéfinie". Dans le développement quotidien, nous devons toujours vérifier si la référence au statut vuex est correcte. S'il y a des problèmes, nous devons les résoudre le plus rapidement possible pour garantir la stabilité et la fiabilité de l'application.

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!