Migrasi dari Vuex 0.6.x ke 1.0

Vuex 2.0 sudah di-release, tapi kenapa petunjuk ini hanya mencakup migrasi ke 1.0? Apakah itu typo? Dan sepertinya Vuex 1.0 dan 2.0 di-release bersamaan. Apa yang terjadi? Yang mana yang harus saya pakai dan apa saja yang cocok dengan Vue 2.0?

Baik Vuex 1.0 atau 2.0 sama-sama:

Namun keduanya memiliki sedikit perbedaan pada target pengguna.

Vuex 2.0 berisi perubahan radikal terhadap desain dan simplifikasi API, untuk mereka yang memulai proyek baru atau ingin performa yang lebih baik dalam manajemen state di sisi client. Hal tersebut tidak dibahas dalam petunjuk migrasi ini, jadi Anda harus mengecek the Vuex 2.0 docs jika Anda ingin mempelajarinya lebih lanjut.

Kebanyakan API Vuex 1.0 sudah kompatibel kebelakang, jadi hanya butuh sedkit perubahan untuk melakukan upgrade. Vuex 1.0 direkomendasikan untuk mereka yang memiliki basis kode yang besar atau mereka yang ingin -upgrade ke Vue 2.0 dengan proses yang lebih mulus. Petunjuk ini didedikasikan untuk memfasilitasi proses tersebut, namun hanya mencantumkan catatan migrasi. Untuk petunjuk penggunaan yang lebih lengkap, lihat the Vuex 1.0 docs.

store.watch dengan Properti String Path diganti

store.watch sekarang hanya menerima fungsi. Sebagai contoh, Anda harus mengganti:

store.watch('user.notifications', callback)

dengan:

store.watch(
  // Saat hasil yang dikembalikan berganti...
  function (state) {
    return state.user.notifications
  },
  // Jalankan callback ini
  callback
)

Hal ini memberikan Anda kontrol yang lebih lengkap terhapdap properti yang reaktif yang ingin Anda amati (watch):

Jalan *Upgrade*

Run the migration helper on your codebase to find examples of store.watch with a string as the first argument.

Emiter Event Store dihapus

Instance dari store tidak lagi mengekspos interface “event emitter” (on, off, emit). Jika Anda menggunakan store sebagai global event bus, lihat bagian ini untuk instruksi migrasi.

Ketimbang menggunakan interface ini untuk memantau even yang dikeluarkan oleh store (contoh: store.on('mutation', callback)), Vue menganalkan sebuah method baru store.subscribe. Penggunaan umum dalam sebuah plugin akan seperti:

var myPlugin = store => {
  store.subscribe(function (mutation, state) {
    // Lakukan sesuatu...
  })
}

Lihat contoh dokumentasi plugins untuk info lebih lanjut.

Jalur *Upgrade*

Jalankan pembantu migrasi dalam basis kode anda untuk menemukan contoh dari store.on, store.off, dan store.emit.

Middlewares diganti

Middlewares digantikan dengan plugins. Sebuah plugin adalah fungsi yang menerima store sebagai satu-satunya argumen, dan dapat mendengarkan perubahan event yang terjadi dalam store.

const myPlugins = store => {
  store.subscribe('mutation', (mutation, state) => {
    // Lakukan sesuatu...
  })
}

Untuk detail yang lebih jelas, lihat dokumentasi plugins.

Jalur Upgrade

Jalankan pembantu migrasi dalam basis kode Anda untuk menemukan contoh dari opsi middlewares di atas "store".