Apakah yang perlu saya lakukan jika "TypeError: Tidak boleh membaca sifat 'xxx' null" muncul apabila menggunakan vuex dalam aplikasi Vue?

Dalam aplikasi Vue, adalah perkara biasa untuk menggunakan vuex untuk pengurusan negeri. Walau bagaimanapun, kadangkala beberapa masalah akan berlaku apabila menggunakan vuex, seperti "TypeError: Cannot read property 'xxx' of null" dan ralat lain. Masalah ini biasanya berlaku apabila menggunakan harta dalam keadaan, dan nilai harta itu adalah batal atau tidak ditentukan. Artikel ini akan memperkenalkan cara menyelesaikan masalah ini.

1. Tentukan sama ada atribut keadaan wujud

Apabila kita menggunakan vuex, jika atribut tertentu ditakrifkan dalam keadaan, kita perlu menilai sama ada ia wujud sebelum menggunakannya. Kita boleh menggunakan kaedah khas $store.getters yang disediakan dalam Vue, yang boleh mendapatkan hartanah dalam negeri dengan mudah dan membuat pertimbangan sebelum mendapatkannya. Apabila sifat yang diperolehi adalah batal atau tidak ditentukan, kami boleh mengembalikan nilai lalai atau melakukan pemprosesan yang sepadan.

Ambil contoh berikut:

Nama pengguna harta ditakrifkan dalam keadaan:

state: {
    username: null
},

Gunakan sifat ini dalam komponen:

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

Apabila harta itu batal atau tidak ditentukan, nilai lalai atau "null" akan dikembalikan.

2. Tetapkan nilai lalai untuk menyatakan dalam mutasi

Dalam vuex, mutasi ialah satu-satunya kaedah yang boleh mengubah suai keadaan. Kita boleh menetapkan nilai lalai untuk menyatakan dalam mutasi untuk memastikan bahawa sifat dalam keadaan tidak batal atau tidak ditentukan. Apabila kami memanggil mutasi, jika atribut dalam keadaan adalah batal atau tidak ditentukan, kami menetapkannya kepada nilai lalai atau mengendalikannya dengan sewajarnya melalui mutasi.

Ambil contoh berikut sebagai contoh:

Tentukan nama pengguna atribut dalam keadaan:

state: {
    username: null
},

Berikan nilai lalai kepada nama pengguna dalam mutasi:

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

Apabila kita memanggil mutasi, jika nama pengguna batal atau tidak ditentukan, ia akan diberikan nilai Merupakan nilai lalai atau "null".

3. Gunakan ciri parameter lalai ES6

Dalam ES6, kita boleh menggunakan ciri parameter lalai untuk menetapkan nilai lalai untuk parameter kaedah. Dalam vuex, kami boleh menggunakan ciri ini untuk memastikan bahawa sifat dalam keadaan tidak batal atau tidak ditentukan.

Ambil contoh berikut sebagai contoh:

Tentukan nama pengguna atribut dalam keadaan:

state: {
    username: null
},

Gunakan ciri parameter lalai ES6 dalam mutasi:

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

Apabila kita memanggil mutasi, jika nama pengguna adalah batal atau tidak ditentukan, ia akan menjadi Berikan nilai kepada nilai lalai atau "null".

Ringkasnya, apabila kami menggunakan vuex dalam aplikasi Vue dan masalah seperti "TypeError: Cannot read property 'xxx' of null" berlaku, kami boleh menentukan sama ada sifat keadaan wujud dan menetapkan nilai lalai kepada keadaan dalam mutasi, gunakan ciri parameter lalai ES6 dan kaedah lain untuk menyelesaikan masalah. Semoga artikel ini bermanfaat kepada semua.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika "TypeError: Tidak boleh membaca sifat 'xxx' null" muncul apabila menggunakan vuex dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!