How to access Vuex module actions from a component

I define a store with two modules, and I'm trying to access one module action, I tried to do

this.$store.dispatch('load');

But I get:

[vuex] unknown action type: load

I tried another options, thing that I found in google , but nothing worked, what is the right way to access module actions?

This is my code:

Vuex definition:

let session = require('./store/session.js');
let options = require('./store/options.js');
const store = new Vuex.Store({
    modules: {
        session: session,
        options: options,
    },
});

options.js

 export default {
    state: {
        data: null,
    }, 
    mutations: {
        setOptions (state, payload) {
            console.log(payload);
        } 
    },
    actions: { 
        load( { commit }) {
            $.getJSON('options')
            .then(function (data) {
                commit('setOptions', data);
            });
        }
    },
    getters: {

    }

}

and my app component:

export default {
    beforeCreate() {
         this.$store.dispatch('load');
    }
}

my vue build:

new Vue({
    el: "#app",
    router,
    store,
    render: h => h(App)
});

1 answer

  • answered 2017-06-17 19:13 SaJed

    <!--index.js-->
        import Vue from 'vue'
        import Vuex from 'vuex'
        import mutations from './mutations.js'
        import actions from './actions.js'
    
         Vue.use(Vuex)
    
        const state = {
    
        }
    
        const store = new Vuex.Store({
          state,
          mutations,
          actions
        })
    
        export default store
    
      <!-- actions.js -->
      export default {
        load( { commit }) {
            $.getJSON('options')
            .then(function (data) {
                commit('setOptions', data);
            });
        }
       }
    
        <!-- mutations.js -->
        export default {
             setOptions (state, payload) {
                console.log(payload);
             } 
        }