What's the best practice for multiple vuex createNamespacedHelpers?

Viewed 584

I was looking for some good practices about createNamespacedHelpers, but couldn't find them.

In my component, I would like to access two store modules. What would be the best way to do it?

I see 3 possibilities:

1: Write it without createNamespacedHelpers

import { mapActions, mapGetters } from "vuex";
...
...
computed: {
  ...mapGetters({
    getterA: "moduleA/getterA",
    getterB: "moduleB/getterB",
  })
}

2: Write it with two createNamespacedHelpers

import { createNamespacedHelpers } from "vuex";
const { mapActions, mapGetters } = createNamespacedHelpers("moduleA");
const moduleBHelper = createNamespacedHelpers("moduleB");
...
...
computed: {
  ...mapGetters(["getterA"]),
  ...moduleBHelper.mapGetters(["getterB"]),
}

3: I found also something like this - write it with two createNamespacedHelpers, but with different syntax

import { createNamespacedHelpers } from "vuex";
const { mapGetters: mapGettersForModuleA } = createNamespacedHelpers("moduleA");
const { mapGetters: mapGettersForModuleB } = createNamespacedHelpers("moduleB");
...
...
computed: {
  ...mapGettersForModuleA(["getterA"]),
  ...mapGettersForModuleB(["getterB"]),
}

Which one would you choose? Is there any better way to do it? Or... maybe it's a bad practice to access two store modules from the same component? Any comments are welcome :)

0 Answers
Related