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 :)