How to access Vuex module actions from a component

Question

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

What happens if you console.log(this.$store) in your beforeCreate() {} hook? There should be an _actions object that shows all of the available actions. — visevo
@visevo There was no properties in that property, but it works when I did import to options — Nati V

mjbryan10 mjbryan10 · Accepted Answer · 2021-03-24T08:38:10

I would consider using the mapActions helper from vuex. Documentation for this can be found at https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components .

example from this page is as follows:

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // map `this.increment()` to `this.$store.dispatch('increment')`

      // `mapActions` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')`
    })
  }
}

How to access Vuex module actions from a component

2 Answers