Sync not working with nuxtjs and vuex in module mode

[haexhub]

Hi,

first, thank you for this library. I really would like to get rid off the overhead. I want to use your library in a nuxtjs project, where we use vuex in module mode. I get the getters working, but the setters want come up. Hope you can give me some advise.

store/index.js

import VuexPathify, { make }  from 'vuex-pathify'

export const plugins = [VuexPathify.plugin]

export const state = () => {
  foo: {
    bar: 'Hello World'
  }
}

export const mutations = {
  ...make.mutations(state()) // seems not to work
// ...make.mutations(this.state) // seems not to work 
}

export const actions = {
  ...make.actions(state()) // seems not to work
// ...make.actions(this.state) // seems not to work 
}

In a component I get the value but can't set it with sync

pages/index.vue

<template>
  <div>
    <input v-model = 'hello' />
  </div>
</template>

<script>
import { sync } from 'vuex-pathify'

export default {
  computed: {
    hello: sync('foo.bar') // get the "Hello World" value, but can't mutate it
  }
}
</script>

The value comes up, but as soon as I want to change it, I get the error message:

What am I doint wrong?

[davestewart]

To access sub-properties Pathify uses @ to make the intention explicit:

hello: sync('foo@bar')

Also, surprised that the make code didn't work?

You can just log the mutations out to check:

export const state = () => {
  foo: {
    bar: 'Hello World'
  }
}

export const mutations = make.mutations(state)

console.log(mutations)
// { SET_FOO: Function }

[haexhub]

I love you! :smile: It was the @!!! After changing hello: sync('foo.bar') to hello: sync('foo@bar') it just worked!

[davestewart]

That's a relief! Nuxt was giving me grief for a bit :P

If you need to access sub-sub-properties, use dot syntax:

foo/bar@baz.a.b.c

There was a discussion on here I think about why I chose @ rather than . but I can't find it now.

As mentioned, it was mainly to indicate intent :)