Nati323
2 years ago
1434
7
Vue

How to access Vuex module actions from a component

Posted 2 years ago by Nati323

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)
});

Please sign in or create an account to participate in this conversation.