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

<template>
    <div class="b-view">
         ...
    </div>
</template>

<script>
  import { createNamespacedHelpers } from 'vuex';
  import Viewer from './Viewer';
  import DTabPane from './tabs/pane';

  const { mapState, mapActions, mapGetters } = createNamespacedHelpers('Address');

  export default {
    name: 'BrowserView',
    components: {
      DTabPane,
      Viewer,
    },
    data() {
      return {
      };
    methods: {
      ...mapActions(['ADDRESS_UPDATE']),
      onDidNavigate(event) {
        this.ADDRESS_UPDATE(event.url);
      },
    },
  };
</script>

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

[ghost]

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.

[tobiasger]

Just a quick note that namespaced: true must be added to the export of the module, at least that's what fixed it for me.

export default {
    state,
    mutations,
    actions,
    namespaced: true
  }