use `mapActions` or `mapGetters` with Vuex 4 and Vue 3

Question

Anybody knows how to use mapState or mapGetters with Vue 3 in the setup function ? I know that is possible to use the store with the useStore hook but with this hook We import all the store while with mapState or mapGetters we can specify a module :

// ...

computed: {
   ...mapGetters('myModule', [
      'myStateVariable'
   ]
) 

//...

Answer 1

As far as I can tell, they get flattened so you can't use myModule/myStateVariable, but myStateVariable should work.

This could be something that may change as Vuex gets to RC releases, but for now if you try to have the same getter twice, you get this error

Answer 2

Perhaps something like this:

import { computed }  from 'vue';
import { useStore } from 'vuex';

const module = 'myModule';

export default {
    setup() {
        const store = useStore();

        return {
            // getter
            one: computed(() => store.getters[`${module}/myStateVariable`],

            // state
            two: computed(() => store.state[module].myStateVariable,
        };
    },
};