typeof Diary

VimとかJSとか。やったことのメモ。自分のため。

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で得たものを自ら捨てている感じがして、なんとも言えない感じに。

記述量は減らせますが、一長一短ですね。

うーん・・・。