Bagaimana saya menangani tindakan tak segerak dengan Vuex?

Artikel ini menunjukkan pengendalian operasi tak segerak di Vuex menggunakan tindakan dengan janji dan async/menunggu. Ia menekankan memisahkan logik tak segerak (tindakan) dari kemas kini negeri (mutasi), menggabungkan keadaan pemuatan, pengendalian ralat yang mantap

Mengendalikan tindakan tak segerak dengan Vuex

Operasi asynchronous adalah perkara biasa dalam aplikasi moden, dan VUEX menyediakan mekanisme untuk menguruskannya dengan anggun. Konsep teras berkisar menggunakan tindakan, yang merupakan fungsi yang dapat melakukan mutasi kepada negara, tetapi yang penting, tidak langsung terikat kepada perubahan negara seperti mutasi. Ini membolehkan mereka melakukan tugas -tugas yang tidak segerak seperti panggilan API sebelum mengemas kini keadaan. Tindakan dihantar dari komponen, dan mereka boleh menggunakan janji atau async/menunggu sintaks untuk pengurusan kod tak segerak yang lebih baik. Kuncinya adalah untuk memisahkan logik tak segerak (tindakan) dari kemas kini negeri (mutasi).

Menggunakan janji atau async/menunggu tindakan Vuex

Ya, anda benar -benar boleh menggunakan kedua -dua janji dan async/menunggu dalam tindakan Vuex untuk mengendalikan operasi tak segerak. Janji menyediakan cara berstruktur untuk mengendalikan operasi tak segerak, sementara Async/Await menawarkan gaya pengekodan yang lebih segerak seperti yang meningkatkan kebolehbacaan.

Menggunakan Janji:

 <code class="javascript">// Action const actions = { fetchData ({ commit }) { return new Promise((resolve, reject) => { fetch('/api/data') .then(response => response.json()) .then(data => { commit('SET_DATA', data); resolve(data); // Resolve the promise }) .catch(error => { reject(error); // Reject the promise }); }); } }; // Mutation const mutations = { SET_DATA (state, data) { state.data = data; } };</code>

Menggunakan async/menunggu:

 <code class="javascript">// Action const actions = { async fetchData ({ commit }) { try { const response = await fetch('/api/data'); const data = await response.json(); commit('SET_DATA', data); return data; // Return the data } catch (error) { // Handle error (see next section) throw error; // Re-throw the error for handling in the component } } }; // Mutation (same as above) const mutations = { SET_DATA (state, data) { state.data = data; } };</code>

Dalam kedua -dua contoh, tindakan itu menghantar mutasi untuk mengemas kini keadaan sebaik sahaja data berjaya diambil. Perbezaan utama adalah bagaimana operasi tak segerak dikendalikan. Janji menggunakan .then() dan .catch() , manakala async/menunggu menggunakan try...catch . Async/menunggu umumnya membawa kepada kod yang lebih bersih dan lebih mudah dibaca untuk operasi tak segerak.

Amalan terbaik untuk menguruskan pengambilan dan kemas kini data tak segerak

Beberapa amalan terbaik menyumbang untuk menguruskan pengambilan dan kemas kini data tak segerak secara efisien di kedai VUEX:

• Kebimbangan berasingan: Pastikan tindakan memberi tumpuan kepada operasi dan mutasi tak segerak yang memberi tumpuan kepada pengemaskinian keadaan. Pemisahan ini meningkatkan kebolehbacaan dan penyelenggaraan.
• Memuatkan keadaan: Memperkenalkan keadaan pemuatan untuk menunjukkan apabila operasi tidak segerak sedang berjalan. Ini meningkatkan pengalaman pengguna dengan memberikan maklum balas.
• Pengendalian ralat: Melaksanakan pengendalian kesilapan yang mantap untuk menguruskan kegagalan yang berpotensi semasa operasi tak segerak (dibincangkan dalam bahagian seterusnya).
• Kemas kini optimis: Untuk operasi tertentu (misalnya, membuat atau mengemas kini data), pertimbangkan kemas kini optimis. Ini bermakna mengemas kini keadaan sebaik sahaja menghantar tindakan, walaupun sebelum pelayan mengesahkan kejayaan operasi. Sekiranya operasi pelayan gagal, keadaan boleh dikembalikan.
• Normalisasi Data: Struktur data anda secara konsisten untuk memudahkan untuk mengurus dan mengakses.
• Tindakan modular: Memecahkan tindakan kompleks ke unit yang lebih kecil dan lebih mudah diurus.
• Gunakan objek context : Gunakan objek context yang diluluskan kepada tindakan untuk mengakses commit , dispatch , state , dan rootState untuk interaksi fleksibel di dalam kedai.

Mengendalikan kesilapan semasa operasi tak segerak

Pengendalian ralat yang berkesan adalah penting untuk membina aplikasi yang mantap. Berikut adalah strategi untuk menangani kesilapan dalam tindakan VUEX:

• Cuba ... menangkap blok (dengan async/menunggu): try...catch adalah cara yang paling mudah untuk mengendalikan kesilapan dalam tindakan async/menunggu. Blok catch memintas kesilapan yang dibuang semasa operasi tak segerak.
• Janji penolakan (dengan janji): Jika menggunakan janji, mengendalikan kesilapan menggunakan kaedah .catch() .
• Objek ralat tersuai: Buat objek ralat tersuai untuk memberikan lebih banyak konteks mengenai ralat, seperti kod ralat atau mesej tertentu. Ini memudahkan penyahpepijatan dan pelaporan ralat yang lebih bermaklumat kepada pengguna.
• Pengendalian ralat berpusat: Pertimbangkan untuk membuat tindakan khusus atau middleware untuk mengendalikan kesilapan di seluruh dunia. Ini memusatkan pembalakan ralat dan menyediakan satu titik untuk mengendalikan pelbagai senario ralat.
• Ralat Negeri: Tambahkan harta tanah ralat ke kedai VUEX anda untuk menyimpan maklumat ralat. Ini membolehkan komponen memaparkan mesej ralat yang sesuai kepada pengguna.

Contoh Menggabungkan pengendalian ralat dengan async/menunggu:

 <code class="javascript">const actions = { async fetchData ({ commit }, payload) { try { const response = await fetch(`/api/data/${payload.id}`); if (!response.ok) { const errorData = await response.json(); // Try to parse error response const errorMessage = errorData.message || 'Failed to fetch data'; throw new Error(errorMessage); // Throw a custom error } const data = await response.json(); commit('SET_DATA', data); return data; } catch (error) { commit('SET_ERROR', error); // Update error state throw error; // Re-throw for handling in component } } }; const mutations = { SET_ERROR (state, error) { state.error = error; } };</code>

Contoh ini menunjukkan cara mengendalikan kesilapan rangkaian dan objek ralat tersuai, menyediakan mekanisme pengendalian ralat yang lebih mantap di dalam kedai VUEX anda. Ingatlah untuk sentiasa memaparkan mesej ralat mesra pengguna dalam komponen anda berdasarkan keadaan ralat di kedai anda.

Atas ialah kandungan terperinci Bagaimana saya menangani tindakan tak segerak dengan Vuex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!