Electron-vue: Example using vuex modules

[grrowley]

I've used Vuex before but never in this module sense. I am purely trying to use the vuex Counter that this package ships with. I've tried the following to no resolve any help would be nice.
/src/renderer/store/modules/Counter.js

const state = {
  main: 0
}

const mutations = {
  DECREMENT_MAIN_COUNTER (state) {
    state.main--
  },
  INCREMENT_MAIN_COUNTER (state) {
    state.main++
  }
}

const actions = {
  someAsyncTask ({ commit }) {
    // do something async
    commit('INCREMENT_MAIN_COUNTER')
  }
}

export default {
  state,
  mutations,
  actions
}

/src/renderer/views/Welcome.vue

<template lang="pug">
  button(@click="test")
</template>

<script>
export default {
  name: 'Welcome',
  data () {
    return {

    }
  },
  methods: {
    test () {
      // what I expect to work
      this.$store.dispatch('someAsyncTask')
      // what I expected with "modules"
      this.$store.dispatch('Counter.someAsyncTask')
      // another attempt
      this.$store.Counter.dispatch('someAsyncTask')
    }
  }
}
</script>

[RogerPaladin]

/src/renderer/views/Welcome.vue

<template lang="pug">
  button(@click="test")
</template>

<script>
const { mapState, mapActions, mapGetters } = createNamespacedHelpers('Counter');

export default {
  name: 'Welcome',
  data () {
    return {

    }
  },
  methods: {
     ...mapActions(['someAsyncTask'])
  }
}
</script>

then use this.someAsyncTask()

Also maybe need to fix persistedState in src\renderer\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'

import { createPersistedState, createSharedMutations } from 'vuex-electron'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: modules,
  plugins: [
    // createPersistedState(), <-- Comment
    createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

[grrowley]

Still lost, I got this error:

 http://eslint.org/docs/rules/no-undef        'createNamespacedHelpers' is not defined         
  src/renderer/components/LandingPage.vue:35:48
    const { mapState, mapActions, mapGetters } = createNamespacedHelpers('Counter')

[RogerPaladin]

import { createNamespacedHelpers } from 'vuex'

[StringKe]

import { createNamespacedHelpers } from 'vuex'

[vuex] module namespace not found in mapActions(): Counter

[vuex] module namespace not found in mapActions(): Address



md5-f9febe3f393c7fbd5e59df64a2af319d

const state = {
link: '',
};

const mutations = {
ADDRESS_UPDATE(state, newLink) {
state.link = newLink;
},
};

const actions = {
ADDRESS_UPDATE({ commit }, newLink) {
commit('ADDRESS_UPDATE', newLink);
},
};

export default {
state,
mutations,
actions,
};

```

[Lionad-Morotar]

@StringKe @grrowley Resolved by disable this :

https://github.com/SimulatedGREG/electron-vue/issues/733

[kmccullen97]

I was able to get this approach to work as well, but what if you want to use multiple modules in the same vue file? For example from the code above I want to access both the Counter and Address modules in the same file.