名前空間を持つ2つのvuexモジュール間でアクションをディスパッチする方法はありますか?


159

名前空間を持つモジュール間でアクションをディスパッチすることは可能ですか?

たとえば、vuexモジュール「gameboard」と「notification」があります。それぞれに名前空間があります。ゲームボードから通知モジュールにアクションをディスパッチしたいのですが。

次のように、モジュール名をディスパッチアクション名に使用できると思いました。

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

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

しかし、これを実行しようとすると、vuexがゲームボードモジュール内でアクションをディスパッチしようとしているというエラーが発生します。

[vuex]不明なローカルアクションタイプ:notification / triggerSelfDismissingNotification、グローバルタイプ:gameboard / notification / triggerSelfDismissingNotification

vuexモジュールからモジュールにディスパッチする方法はありますか、またはルートvuexインスタンスにある種のブリッジを作成する必要がありますか?

回答:


343

ルートコンテキストからディスパッチすることを指定するだけです。

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

これで、ディスパッチがルートに到達すると、(ルートインスタンスに対して)通知モジュールへの正しいネームスペースパスが設定されます。

これはnamespaced: true、vuexストアモジュールを設定していることを前提としています。


39
これは私の解決策を探すためのインターネットでの唯一のヒットです。回答ありがとうございます。
Peter Roehlen

8
公平を期すために、「名前空間モジュール内のグローバルアセットへのアクセス」のvuex.vuejs.org/en/modules.htmlに記載されています。それがで取るために一種厄介なのですが。
ジェイク

2
私はvueが大好きですが、vuexはシンプルにするのではなく、より多くの難易度を追加するように思えます。これがvuexの目的ではないことはわかっていますが、この例のように常にいくつかの規則に注意する必要があるのは面倒ではないnotification/triggerので、もう少し一般的にしたい場合は${NOTIF_TYPE_NAME}/${NOTIF_TRIGGER_ACTION}、スラッシュが必要な場合、またはこのためのヘルパー関数を作成する場合でも、アプリをよりモジュール化したい場合は、私が得るよりもはるかに多くを支払うと感じています。これが私の意見です
ディマGimburg

11
使用できますthis.dispatch。必要ありません{root: true}。これはグローバルです。
MKatleast3 2018年

6
いいえ、使用する必要はありません{root: true}。あなたが意図したケースはおそらく子モジュールにディスパッチすることです、実際には(そして明らかに)このフラグを必要としません。
kursus

0

mencioned @ MKatleast3として

使用できますthis.dispatch{root: true}ディスパッチオプションには必要ありません。これはグローバルです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.