1. ホーム
  2. vue.js

[解決済み】名前空間が設定された2つのVuexモジュール間でアクションをディスパッチする方法はありますか?

2022-04-06 21:11:22

質問

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

例えば、私はvuexモジュール"gameboard"と"notification"を持っています。それぞれは名前空間です。ゲームボードからnotificationモジュールにアクションをディスパッチしたいと思います。

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

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

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

しかし、これを実行しようとすると、vuexが私のgameboardモジュール内でアクションをディスパッチしようとしているのではないかと思われるエラーが発生します。

[vuex] unknown local action type: notification/triggerSelfDismissingNotification, global type: gameboard/notification/triggerSelfDismissingNotification

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

どのように解決するのですか?

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

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

これで、ディスパッチがルートに到達したとき、notificationモジュールへの正しい名前空間パス(ルートインスタンスからの相対パス)を持つことになります。

これは、あなたが namespaced: true を使用します。