【Vuex】ルートモジュールのメソッドを呼び出す

niffy
2022-08-26
niffy
2022-08-26

はじめに

Vuexでメソッドの共通化を行う上で、ルートモジュールに実装したメソッドやミューテーションを呼び出したいタイミングがありました。
今回は、その時に使用した方法+αをメモしておきたいと思います。

実装

下記の方法で実装できました。(ソースはドキュメントより引用しております。)

■Actionの場合

```
 dispatch('someOtherAction') // -> 'foo/someOtherAction'
 dispatch('someOtherAction', null, { root: true }) // 'someOtherAction'
```
第二引数、第三引数を指定せずにdispatchすると同モジュール内のActionを実行しますが、第三引数に{root: true}を指定することで、ルートモジュールのActionを呼び出すことができます。

■Mutationの場合

```
 commit('someOtherAction') // -> 'foo/someOtherAction'
 commit('someOtherAction', null, { root: true }) // 'someOtherAction'
```
こちらもActionsと同様に{root: true}を指定することでルートモジュールのミューテーションをコミットすることが出来ます。

■子モジュールのメソッドを呼び出したい場合は、、??

ちょっとイレギュラーな使用法になるかもしれませんが、
```
 commit('foo/someOtherAction', null, { root: true }) // 'foo/someOtherAction'
```
のように{root: true}を指定して起点の名前空間をルートオブジェクトにした上でpathを指定すれば呼び出せるようです。

終わりに

こちら積極的に活用して共通化された重複の少ないコードを書いていきたいと思います!