useMutations doesn't work with full nested namespace

[oliverh-cf]

Hi there!

Perhaps I'm misreading the documentation but from what I can tell, both of these should work but don't.

This works just fine:

const { toggleEdit } = useMutations("ProductStore/ProductPrimaryStore", [
    "toggleEdit"
]);

However this does not:

const { toggleEdit } = useMutations( [
    "ProductStore/ProductPrimaryStore/toggleEdit"
]);

I would love to be able to declare all my mutations from ProductStore at once if possible, so something like this:

const { toggleEdit, anotherMutation } = useMutations("ProductStore", [
    "ProductPrimaryStore/toggleEdit",
    "some/other/namespace/within/ProductStore/anotherMutation"
]);

I'm currently using the latest version of Vue 2 with the latest version of vue-use-utilities.

Thanks!

[xiaoluoboding]

@oliverh-cf Hi, there,

@vueblocks/vue-use-vuex is just similar with Vuex Component Binding Helpers

So you could find out the vuex docs about namespacing

Binding Helpers with Namespace

When binding a namespaced module to components with the mapState, mapGetters, mapActions and mapMutations helpers, it can get a bit verbose:

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  }),
  ...mapGetters([
    'some/nested/module/someGetter', // -> this['some/nested/module/someGetter']
    'some/nested/module/someOtherGetter', // -> this['some/nested/module/someOtherGetter']
  ])
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

In such cases, you can pass the module namespace string as the first argument to the helpers so that all bindings are done using that module as the context. The above can be simplified to:

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  }),
  ...mapGetters('some/nested/module', [
    'someGetter', // -> this.someGetter
    'someOtherGetter', // -> this.someOtherGetter
  ])
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

---

In your case, if you pass the full nested namespace string as the arguments

const { toggleEdit } = useMutations( [
    "ProductStore/ProductPrimaryStore/toggleEdit"
]);

We should be get named ProductStore/ProductPrimaryStore/toggleEdit drestructuring function.

like this:

...useMutations( [
    "ProductStore/ProductPrimaryStore/toggleEdit"
]); => this['ProductStore/ProductPrimaryStore/toggleEdit']()

[oliverh-cf]

Thanks for the detailed explanation! However what you're showing doesn't seem to be working properly.

Running this:

const { toggleEdit } = useMutations("ProductStore/ProductPrimaryStore", [
  "toggleEdit"
]);

properly returns the function as expected. But when I pass the full nested namespace string as an argument:

const { toggleEdit } = useMutations([
  "ProductStore/ProductPrimaryStore/toggleEdit"
]);

toggleEdit is undefined.

Sorry for any confusion!

[xiaoluoboding]

@oliverh-cf

you could console this

console.log(useMutations([
  "ProductStore/ProductPrimaryStore/toggleEdit"
])) // -> this['ProductStore/ProductPrimaryStore/toggleEdit']()

then in Vue instance we get a function named ProductStore/ProductPrimaryStore/toggleEdit

if you expect a function that named toggleEdit, you should provide the namespace.