Baru-baru ini saya menemukan diskusi yang menarik tentang Full Stack Radio -
Bulding Komponen UI Lebih Baik dengan Mesin Negara . Intinya adalah bahwa konsep mesin negara dapat membantu pengembangan komponen Vue. Saya mulai melihat solusi yang sudah jadi, tetapi mereka tidak begitu sederhana, dan saya ingin membuat implementasi yang lebih sederhana, yang ingin saya bicarakan di artikel ini. Artikel ini mungkin bermanfaat tidak hanya bagi mereka yang menggunakan Vue, tetapi juga untuk pengguna Angular, React, dll., Serta untuk programmer dari "denominasi" lainnya.
Diskusi menyentuh pada topik yang dekat dengan semua orang yang menulis komponen. Bayangkan bahwa Anda sedang menulis komponen yang meminta data, dan Anda perlu menampilkan pemintal saat kueri berjalan. Biasanya dalam kasus seperti itu Anda membuat variabel boolean isLoading. Awalnya, isLoading = false, dan sebelum meminta data, Anda mengatur variabel isLoading menjadi true. Setelah data tiba, Anda kembali menetapkannya ke false. Visibilitas spinner terkait dengan isLoading.
Pendekatan ini sangat bagus. Tetapi komponennya jarang begitu sederhana. Dan dalam perjalanannya, masih perlu membuat variabel logis yang menyimpan status yang berbeda. Masalahnya adalah bahwa jika Anda memiliki satu variabel keadaan, itu menghasilkan dua keadaan, dan dua variabel logis sudah memiliki empat keadaan, tiga - delapan, dll. Dan masalahnya adalah, programmer dapat membuat kesalahan dan tidak memproses status apa pun yang mungkin terjadi. Dan ini mengarah pada kesalahan. Selain itu, agak sulit untuk memahami komponen seperti itu dan perlu untuk menciptakan kondisi.
Jawabannya adalah mesin negara. Prinsipnya sederhana - Anda menggambarkan keadaan di mana sistem mungkin berada, dan transisi antara negara. Memiliki mesin seperti itu dapat menghindari banyak kesalahan, serta menentukan kondisi sistem secara deklaratif.
Ada cukup banyak artikel tentang hal ini (misalnya,
Finite State Machines in Vue , tetapi kebanyakan dari mereka, setelah teori singkat, merekomendasikan menghubungkan salah satu perpustakaan yang sudah jadi. Misalnya,
davidkpiano / xstate .
Saya pikir xstate terlalu rumit dan ingin mencoba sepeda saya. Selain itu, ini adalah alasan bagus untuk melihat pola baru bagi saya.
Berikut adalah kode untuk bermain -
Mesin negara dengan Vue, versi 2 . Dan di sini adalah versi mentah, dengan pendekatan yang sedikit berbeda -
Mesin negara dengan Vue, versi 1 .
Saya mulai dari artikel
State Machines .
Jadi mesin negara:
class StateMachine { constructor (initialState, transitions) { this.state = initialState this.transitions = transitions } transition (nextState, method, params) { const transitionsArray = this.transitions[this.state] if(transitionsArray.indexOf(nextState) === -1) return this.state if(method) method(...params) this.state = nextState return this.state } }
Inisialisasi seperti ini:
const machine = new StateMachine('idle', { idle: ['waitingConfirmation'], waitingConfirmation: ['idle','waitingData'], waitingData: ['dataReady', 'dataProblem'], dataReady: ['waitingConfirmation'], dataProblem: ['waitingConfirmation'] })
Dalam metode komponen, buat fungsi transisi:
transition(nextState, method = null, params = []) { this.machineState = machine.transition(nextState, method, params) }
Dalam acara tersebut, kami segera menulis ke mana kami ingin pergi:
@click=“transition('waitingConfirmation')"
Jika Anda perlu memanggil metode komponen secara bersamaan, tulis ini:
@click="transition('waitingData', getData, [222])”
Parameter kedua adalah metode komponen yang harus dipanggil dengan transisi ini.
Parameter ketiga adalah array variabel untuk metode ini.
Di dalam metode, panggilannya adalah:
this.transition('dataReady')
Saya sengaja tidak menyembunyikan tombol dengan v-if, hanya untuk sekarang, membuat warna font mereka abu-abu. Tetapi jelas bahwa mengkliknya tidak berfungsi jika mesin tidak memungkinkan.
Secara umum, semuanya berfungsi, solusinya sangat mudah. Dan yang paling penting, kami berhasil mendeskripsikan operasi komponen secara deklaratif. Saya sendiri hampir siap untuk menerapkan pendekatan ini dalam aplikasi nyata, tetapi saya ingin memahami pro dan kontra dari pendekatan ini, dan mendengarkan saran dari para ahli yang lebih berpengalaman.