【Vuex】ルートモジュールのメソッドを呼び出す
2022-08-26
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を指定すれば呼び出せるようです。
終わりに
こちら積極的に活用して共通化された重複の少ないコードを書いていきたいと思います!