Donnie Donnie - 1 year ago 104
Javascript Question

Dispatch mutations from service file

I have an

that I'm abstracting my API calls into. I'd like to
app-level mutations from within the
service, but I get the following error:

TypeError: dispatch is not a function. (In 'dispatch('SET_BUSY')', 'dispatch' is undefined)


import { ApiService } from './services';

export const setAppMode = function ({ dispatch }) {
noun: 'Application',
verb: 'GetMode'
}, response => {
dispatch('SET_APP_MODE', response.Data.mode);


import Vue from 'vue';

export const ApiService = (options = {}, callback, dispatch) => {
let endpoint = 'localhost/api/index.php';
let parameters =;

dispatch('SET_BUSY');, parameters, []).then((promise) => {
return promise.text();
}, (promise) => {
return promise.text();
}).then(response => {
response = JSON.parse(response);


if (response.Result === 'ERROR') {
console.log('ERROR: ' + response.Error.Message);


Answer Source

An action function expects the store instance as the first parameter. This is usually done by Vuex automatically.

When using an action in a Vue instance, the way to accomplish it in Vuex 1 is as follows:

import { setAppMode } from './actions'

new Vue({
  vuex: {
    actions: {

Now you can use this.setAppMode() and have the store automatically available as first argument.

Note: you also need to set the storeproperty of the VM

import store from `./store`

// and inside the VM options:
    store: store

If store has not been set to the vm instance, you still can pass it as a parameter, manually:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download