Apakah ada cara untuk mengirim tindakan antara dua modul vuex namespaced?

159

Apakah mungkin untuk mengirim tindakan di antara modul-modul namespaced?

Misalnya saya punya modul vuex "gameboard" dan "notifikasi". Masing-masing ruang nama. Saya ingin mengirim tindakan dari gameboard ke modul notifikasi.

Saya pikir saya bisa menggunakan nama modul dalam nama tindakan pengiriman seperti ini:

// store/modules/gameboard.js
const actions = {
    myaction ({dispatch}) {
        ...
        dispatch('notification/triggerSelfDismissingNotifcation', {...})
    }
}

// store/modules/notification.js
const actions = {
    triggerSelfDismissingNotification (context, payload) {
        ...
    }
}

Tetapi ketika saya mencoba melakukan ini, saya mendapatkan kesalahan yang membuat saya vuex mencoba mengirim tindakan dalam modul gameboard saya:

[vuex] jenis tindakan lokal tidak dikenal: notifikasi / triggerSelfDismissingNotification, tipe global: gameboard / notification / triggerSelfDismissingNotification

Apakah ada cara pengiriman dari modul vuex ke modul atau apakah saya perlu membuat semacam jembatan pada instance root vuex?

vue.js vuejs2 vuex Chris Schmitz
sumber

Jawaban:

344

Anda hanya perlu menentukan bahwa Anda mengirim dari konteks root:

// from the gameboard.js vuex module
dispatch('notification/triggerSelfDismissingNotifcation', {...}, {root:true})

Sekarang ketika pengiriman mencapai root, ia akan memiliki jalur namespace yang benar ke modul notifikasi (relatif terhadap instance root).

Ini dengan asumsi Anda sedang mengatur namespaced: truepada modul toko vuex Anda.

Jake
sumber
39
Ini adalah satu-satunya hit di internet untuk mencari solusi. Terimakasih telah menjawab.
Peter Roehlen
9
Agar adil, ini didokumentasikan di sini vuex.vuejs.org/en/modules.html di "Mengakses Aset Global dalam Modul Namespaced". Meskipun agak canggung untuk menerima.
Jake
2
Saya suka vue, tapi menurut saya vuex menambahkan lebih banyak lapisan kesulitan daripada membuatnya lebih sederhana. Sekarang saya tahu bahwa ini bukan tujuan vuex tetapi tetap saja, bukankah itu mengganggu bahwa saya selalu perlu menyadari beberapa konvensi seperti dalam contoh ini notification/trigger, maka jika saya ingin itu menjadi sedikit lebih generik saya lakukan ${NOTIF_TYPE_NAME}/${NOTIF_TRIGGER_ACTION}, masih perlu tebasan, atau bahkan membuat fungsi pembantu untuk ini, saya merasa bahwa ketika saya ingin Aplikasi saya lebih modular, saya membayar lebih banyak daripada yang saya dapatkan. Ini pendapat saya
Dima Gimburg
11
Anda bisa menggunakannya this.dispatch. Itu tidak perlu {root: true}. Ini global.
MKatleast3
6
Tidak, Anda harus menggunakan {root: true}. Kasing yang Anda maksud mungkin adalah pengiriman ke modul anak, yang memang (dan jelas) tidak memerlukan tanda ini.
kursus
0

Seperti mencioned @ MKatleast3

Anda bisa menggunakannya this.dispatch. Tidak perlu {root: true}dalam opsi pengiriman. Ini global.

Perlambatan
sumber