VuexのcreateNamespacedHelpers、同名どうするよ
昨日書いた「VuexのcreateNamespacedHelpersでdispatchの記述を短くしたい」なんですが。
一つ考慮が漏れてました。
namespace
があることで同じ名前のアクション名でも問題なかったのが、あれをやると死にますね。
(よくよく考えたら当たり前)
例えば、それぞれのモジュールでステートを初期化するアクションがあるとすると・・・
// foo/types.js export const namespace = 'foo' export const RESET = 'RESET' // hoge/types.js export const namespace = 'hoge' export const RESET = 'RESET'
import * as fooTypes from '@/store/modules/Foo/types' import * as hogeTypes from '@/store/modules/Hoge/types' import { createNamespacedHelpers } from 'vuex' const { mapActions: mapActionsOfFoo } = createNamespacedHelpers(fooTypes.namespace) const { mapActions: mapActionsOfHoge } = createNamespacedHelpers(hogeTypes.namespace) // ... methods: { ...mapActionsOfFoo([fooTypes.RESET]), ...mapActionsOfHoge([hogeTypes.RESET]) }
この場合、同じRESET
がマッピングされてしまうので、結果的にはHoge
側がマッピングされてしまいます。
防ぐには、
FOO_RESET
とかHOGE_RESET
とか分けた名前にする(namespaceの意味とは)mapActions({ FOO_RESET: fooTypes.RESET })
みたいにマップするときに名前を変える
かなと思いますが、namespace
で得たものを自ら捨てている感じがして、なんとも言えない感じに。
記述量は減らせますが、一長一短ですね。
うーん・・・。