Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] tidak mengubah keadaan kedai vuex di luar pengendali mutasi apabila menggunakan vuex dalam aplikasi Vue?

Dalam aplikasi Vue, menggunakan vuex ialah kaedah pengurusan keadaan biasa. Walau bagaimanapun, apabila menggunakan vuex, kadangkala kita mungkin menghadapi mesej ralat sedemikian: "Ralat: [vuex] jangan mutasi keadaan kedai vuex di luar pengendali mutasi Apakah maksud mesej ralat ini? Mengapa mesej ralat ini muncul? Bagaimana untuk membetulkan ralat ini? Artikel ini akan membincangkan isu ini secara terperinci.

Maksud gesaan ralat

"Ralat: [vuex] jangan mutasi keadaan kedai vuex di luar pengendali mutasi" bermakna dalam vuex, keadaan vuex tidak boleh diubah suai terus di luar fungsi mutasi. Dalam erti kata lain, apabila kita mengubah suai nilai keadaan vuex (iaitu keadaan) dalam aplikasi, kita tidak seharusnya mengubah suai nilai keadaan secara langsung, tetapi melalui fungsi mutasi.

Ini kerana, dalam Vuex, state ialah satu-satunya sumber data dan merupakan objek responsif Apabila nilai keadaan berubah, komponen yang berkaitan akan dimuat semula secara automatik, dengan itu merealisasikan perubahan masa nyata dalam data. Jika kita mengubah suai secara langsung nilai keadaan, maka mekanisme responsif ini akan gagal dan antara muka tidak boleh dikemas kini.

Jadi, jika mesej ralat ini muncul, bermakna kami mengubahsuai secara langsung nilai keadaan dalam kod dan bukannya mengubahnya melalui fungsi mutasi. Jadi, bagaimana untuk mengelakkan kesilapan ini? Ini memerlukan kita memberi perhatian kepada beberapa peraturan semasa menulis kod.

Bagaimana untuk mengelakkan ralat ini?

Untuk mengelakkan ralat ini, anda perlu mengikut dua peraturan berikut:

1. Nilai keadaan hanya boleh diubah suai dalam fungsi mutasi

Fungsi mutasi ialah kaedah yang digunakan khas untuk memproses data keadaan, dan ia adalah bahagian teras Vuex. Apabila kita mengubah suai nilai keadaan dalam aplikasi, kita harus mengubah suainya melalui mutasi dan bukannya mengubahnya secara langsung.

Kod sampel:

// mutation函数用来修改state中的count值
const mutations = {
  addCount(state, num) {
    state.count += num;
  }
}

// 调用方法，修改state中的count值
this.$store.commit('addCount', 5);

2. Fungsi mutasi mesti dilaksanakan secara serentak

Fungsi mutasi mestilah fungsi segerak, iaitu, ia tidak boleh mengandungi operasi tak segerak (seperti setTimeout). Ini kerana Vuex perlu memastikan bahawa pelbagai fungsi mutasi dilaksanakan secara berurutan dalam susunan pendaftaran, yang diperlukan oleh mekanisme responsif Vuex. Jika fungsi mutasi tidak segerak, pesanan ini tidak boleh dijamin dan keadaan tidak boleh dikemas kini dengan betul.

Kod sampel:

// mutation函数
const mutations = {
  // 增加count值
  addCount(state, num) {
    setTimeout(() => {
      state.count += num; // 错误代码：包含异步操作
    }, 1000);
  }
}

// 调用方法
this.$store.commit('addCount', 5);

Jika ralat sedemikian berlaku, kita boleh menggunakan fungsi tindakan untuk menyerahkan mutasi daripada operasi tak segerak. Kod sampel:

// mutation函数
const mutations = {
  // 增加count值
  addCount(state, num) {
    state.count += num;
  }
}

// action函数，提交mutation
const actions = {
  asyncAddCount(context, num) {
    setTimeout(() => {
      context.commit('addCount', num); // 提交mutation
    }, 1000);
  }
}

// 调用方法，通过action间接调用mutation
this.$store.dispatch('asyncAddCount', 5);

Dengan cara ini, anda boleh memastikan fungsi mutasi masih dilaksanakan secara serentak.

Ringkasan

Apabila menggunakan vuex dalam aplikasi Vue, "Ralat: [vuex] jangan mutasi keadaan kedai vuex di luar pengendali mutasi ini bermakna kami mengubah suai keadaan vuex secara langsung tanpa menggunakan mutasi Untuk mengubah suai, ini melanggar peraturan Vuex.

Untuk mengelakkan ralat ini, kita perlu memberi perhatian kepada dua perkara berikut semasa menulis kod:

1. Nilai keadaan hanya boleh diubah suai dalam fungsi mutasi
2. Fungsi mutasi mesti dilaksanakan secara serentak

Jika anda masih perlu menggunakan operasi tak segerak, anda boleh Gunakan fungsi tindakan untuk menyerahkan mutasi daripada operasi tak segerak. Dengan mengikuti peraturan ini, anda boleh mengelakkan kesilapan ini dan berjaya menggunakan Vuex untuk pengurusan negeri.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] tidak mengubah keadaan kedai vuex di luar pengendali mutasi apabila menggunakan vuex dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!