Rumah > hujung hadapan web > View.js > Apakah yang perlu saya lakukan jika 'TypeError: Cannot read property 'xxx' of undefined' muncul apabila menggunakan vuex dalam aplikasi Vue?

Apakah yang perlu saya lakukan jika 'TypeError: Cannot read property 'xxx' of undefined' muncul apabila menggunakan vuex dalam aplikasi Vue?

王林
Lepaskan: 2023-08-18 15:27:14
asal
3347 orang telah melayarinya

在Vue应用中使用vuex时出现“TypeError: Cannot read property 'xxx' of undefined”怎么办?

Apabila menggunakan vuex dalam aplikasi Vue, kita sering menghadapi ralat "TypeError: Tidak boleh membaca sifat 'xxx' yang tidak ditentukan". Kejadian ralat ini biasanya berkaitan dengan struktur logik kod, definisi modul vuex dan keadaannya, kaedah panggilan, dsb. Artikel ini akan memperincikan cara untuk menyelesaikan masalah dan menyelesaikan ralat ini apabila ia berlaku.

1. Punca dan penyelesaian masalah ralat

1. Tiada fungsi tambahan seperti mapState digunakan

Apabila menggunakan vuex, kita harus menggunakan fungsi tambahan seperti mapState, mapGetters, mapMutations, mapActions, dll. kedai. Jika kita tidak menggunakan fungsi tambahan ini, tetapi tulis tangan kod untuk membaca keadaan dalam stor, ralat seperti "TypeError: Cannot read property 'xxx' of undefined" akan berlaku dengan mudah.

Kaedah penyelesaian masalah: Semak sama ada terdapat sebarang kod tulisan tangan untuk membaca status kedai dalam kod Jika ya, pertimbangkan untuk menggunakan fungsi tambahan untuk menggantikannya.

2. Akses modul yang tidak ditentukan atau keadaan yang sepadan

Jika kita mentakrifkan modul dalam Vuex dan menggunakan keadaan tertentu dalam modul dalam komponen, tetapi modul yang ditentukan tidak dimuatkan atau keadaan dimuatkan Jika ia tidak dimulakan, ralat seperti "TypeError: Cannot read property 'xxx' of undefined" akan berlaku.

Kaedah penyelesaian masalah: Semak sama ada komponen mengakses modul vuex yang diperlukan dengan betul dan pastikan modul telah ditakrifkan dan dimulakan sebelum komponen digunakan.

3. Gunakan store.state.xxx dan kedai itu sendiri tidak ditentukan

Jika anda menggunakan store.state.xxx dalam komponen dan kedai itu sendiri tidak ditentukan, "TypeError: Cannot read property 'xxx' of undefined" akan muncul ralat.

Kaedah penyelesaian masalah: Semak kod yang merujuk stor dalam komponen untuk memastikan bahawa stor telah dibuat instantiated dengan betul.

4 Permintaan asynchronous tidak mengembalikan data, menyebabkan status akses gagal

Jika kami membuat permintaan tak segerak dalam Vuex, tetapi mengakses status sebelum permintaan mengembalikan data, "TypeError: Cannot read property 'xxx' akan muncul. ralat yang tidak ditentukan".

Kaedah penyelesaian masalah: Pastikan data permintaan tak segerak yang berkaitan telah diperoleh sebelum mengakses status vuex.

2. Penyelesaian

1. Gunakan fungsi tambahan seperti mapState

Gunakan fungsi tambahan seperti mapState dalam atribut yang dikira dalam komponen, seperti yang ditunjukkan di bawah:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      xxx: state => state.xxx
    })
  }
}
Salin selepas log masuk

2 Akses modul dan status yang sepadan dengan betul pastikan modul berada dalam Komponen telah ditakrifkan dan dimulakan sebelum ini:

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

export default new Vuex.Store({
  modules: {
    myModule
  }
})
Salin selepas log masuk

Gunakan keadaan dalam modul dalam komponen:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      xxx: state => state.myModule.xxx
    })
  }
}
Salin selepas log masuk

3. Pastikan stor telah dibuat instantiated dengan betul

Mulakan stor dengan betul dalam utama. js fail:

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

Vue.use(Vuex)

new Vue({
  store,
  //...
})
Salin selepas log masuk

4. Pastikan data permintaan tak segerak telah diperoleh sebelum mengakses status vuex

seperti yang ditunjukkan di bawah:

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 => {})
  }
}
Salin selepas log masuk

Ringkasan:

Di atas adalah penyelesaian masalah dan penyelesaian apabila menghadapi "TypeError" baca sifat 'xxx' ralat yang tidak ditentukan. Dalam pembangunan harian, kita perlu sentiasa menyemak sama ada rujukan kepada status vuex adalah betul Jika terdapat sebarang masalah, kita mesti menyelesaikannya secepat mungkin untuk memastikan kestabilan dan kebolehpercayaan aplikasi.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika 'TypeError: Cannot read property 'xxx' of undefined' muncul apabila menggunakan vuex dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan