Apakah Vuex dan apakah konsep terasnya?

VUEX menyelesaikan masalah bahawa pelbagai komponen berkongsi dan mengendalikan data yang sama sukar untuk dikendalikan. Ia menyediakan keadaan aplikasi pengurusan storan terpusat untuk memastikan perubahan keadaan dapat diramalkan. Melalui kedai sebagai sumber data tunggal, ia menyokong akses keadaan antara komponen tanpa prop yang berlalu; Intinya termasuk data penyimpanan negeri, keadaan pemprosesan getters, pengubahsuaian segerak negara, tindakan mengendalikan operasi asynchronous dan mengemukakan mutasi; Untuk aplikasi yang besar, organisasi modular kod boleh digunakan untuk meningkatkan kebolehpercayaan dan skalabiliti.

VUEX adalah perpustakaan corak pengurusan negeri untuk aplikasi VUE.JS. Ia berfungsi sebagai kedai berpusat untuk semua negara komponen dalam aplikasi, dengan peraturan yang memastikan bahawa negara hanya boleh bermutasi dengan cara yang boleh diramal.

Pada terasnya, VUEX membantu anda menguruskan keadaan bersama dalam pelbagai komponen dengan cara yang berstruktur dan dikekalkan - terutamanya berguna apabila aplikasi anda tumbuh dalam saiz dan kerumitan.

Masalah apa yang diselesaikan oleh Vuex?

Dalam aplikasi VUE yang tipikal, komponen berkomunikasi antara satu sama lain melalui prop dan peristiwa. Tetapi apabila pelbagai komponen perlu berkongsi dan memanipulasi data yang sama, pendekatan ini menjadi lebih sukar untuk dikendalikan. Langkah -langkah Vuex dengan menyediakan satu sumber kebenaran untuk keadaan aplikasi anda, menjadikannya lebih mudah untuk mengesan perubahan dan masalah debug.

1. Kedai VUEX

Kedai adalah hati Vuex. Ia memegang keadaan aplikasi dan menyediakan kaedah untuk mengemas kini dengan cara yang terkawal.

Anda membuat kedai seperti ini:

 const store = new Vuex.store ({
  Negeri: {
    Kira: 0
  }
});

Kemudian, anda lulus kedai ini ke dalam aplikasi Vue anda. Setelah disediakan, mana -mana komponen boleh mengakses state tanpa perlu lulus melalui prop.

Untuk mendapatkan data dari kedai di dalam komponen, anda boleh menggunakan harta yang dikira :

 dikira: {
  kaunter () {
    kembali ini. $ store.state.count;
  }
}

Atau lebih baik lagi, gunakan pembantu mapState untuk menjadikannya lebih bersih:

 import {MapState} dari 'Vuex';

Eksport Lalai {
  dikira: MapState (['Count'])
}

2. Negeri, Getters, Mutasi, dan Tindakan

Ini adalah empat blok bangunan utama Vuex.

? Negeri

Ini adalah sumber kebenaran untuk data aplikasi anda. Fikirkannya seperti fungsi data() dalam komponen VUE tetapi dikongsi di seluruh aplikasi.

Contoh:

 Negeri: {
  Pengguna: null,
  Cartitem: []
}

? Getters

Getters adalah seperti harta yang dikira untuk kedai. Mereka membiarkan anda memproses atau menapis keadaan sebelum menggunakannya dalam komponen.

Contoh:

 getters: {
  carttotal (negeri) {
    kembali state.cartitems.reduce ((jumlah, item) => sum item.price, 0);
  }
}

Gunakannya dalam komponen seperti ini:

 Ini. $ store.getters.carttotal

? Mutasi

Mutasi adalah satu -satunya cara untuk mengubah keadaan di Vuex. Setiap mutasi mempunyai jenis (seperti nama acara) dan fungsi pengendali yang mengubah keadaan.

Contoh:

 Mutasi: {
  kenaikan (keadaan) {
    state.count;
  }
}

Anda melakukan mutasi seperti ini:

 Ini. $ store.commit ('kenaikan');

Nota: Mutasi mestilah segerak. Jika anda memerlukan logik async, gunakan tindakan.

? Tindakan

Tindakan adalah serupa dengan mutasi, tetapi mereka mengendalikan operasi tak segerak. Mereka tidak mengubah keadaan secara langsung - sebaliknya, mereka melakukan mutasi selepas melakukan sesuatu seperti mengambil data.

Contoh:

 Tindakan: {
  fetchuser ({commit}) {
    api.getuser (). Kemudian (user => {
      komit ('setUser', pengguna);
    });
  }
}

Anda menghantar tindakan seperti ini:

 Ini. $ store.dispatch ('fetchuser');

3. Modul untuk aplikasi besar

Apabila aplikasi anda tumbuh, meletakkan segala -galanya di satu kedai menjadi kemas. Vuex membolehkan anda memecah kedai ke dalam modul , masing -masing dengan keadaan mereka sendiri, getters, mutasi, dan tindakan.

Contoh:

 const store = new Vuex.store ({
  modul: {
    usermodule: {
      Negeri: () => ({name: 'John'}),
      Mutasi: { / * ... * /},
      Tindakan: { / * ... * /}
    },
    Cartmodule: {
      Negeri: () => ({item: []}),
      // ...
    }
  }
});

Setiap modul boleh diberi nama supaya anda boleh memanggil tindakan atau mutasi tertentu seperti:

 Ini. $ store.dispatch ('usermodule/fetchprofile');

Modul membantu mengekalkan asas anda diatur dan berskala.

4. Bilakah anda harus menggunakan Vuex?

• Apabila pelbagai komponen perlu berkongsi data yang sama.
• Apabila anda mendapati diri anda lulus data melalui banyak lapisan komponen hanya untuk menjangkau anak.
• Apabila menjejaki perubahan keadaan menjadi sukar tanpa sistem terpusat.

Anda tidak memerlukan VUEX untuk aplikasi kecil atau projek mudah. Tetapi apabila aplikasi anda mula semakin kompleks, Vuex membuat perkara lebih mudah untuk dikendalikan.

Itu pada dasarnya. Vuex memberi anda alat untuk menguruskan keadaan global dengan bersih dan diramalkan. Ia mungkin kelihatan seperti Overkill pada mulanya, tetapi apabila aplikasi anda mencecah tahap kerumitan tertentu, anda akan menghargai struktur yang kukuh di tempatnya.

Atas ialah kandungan terperinci Apakah Vuex dan apakah konsep terasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!