CODEWITHSUNDEEP
vue.jsaxios
ToddT
ToddT

Reputation: 3258

Vue Axios - not sure why I can't call a function on this response

I'm updating the code of a previous dev and I'm stuck on why I can't do this, as the code is returning this error:

Uncaught (in promise) TypeError: failedCallback is not a function

This is the function I'm working with:

export default {
  get(callback, failedCallback) {
    axios.get(`/admin/shops`)
         .then(response => callback(response.data))
         .catch(errors => failedCallback(errors))
  }
}

which is then imported like this:

import getShop from '../api/shops'

and used like this in my global router guard

router.beforeEach((to, from, next) => {
  if(to.name == null){
    getShop.get(
      data => {
        if(data.setup) {
          debugger;
          this.$store.dispatch('getBackground', false); #this is the line that causes the error!
          next({ name: 'customers_table'});
        }
        else {
          next({ name: 'plans'})
        }
      });
  }
  else {
    next();
  }
})

When I add the below line I get the TypeError

this.$store.dispatch('getBackground', false);

not sure why I get that error or how to fix it?

EDIT: This is my getBackground action

getBackground: ({ commit }, payload) => {
  commit('changeBackground', payload);
}

Upvotes: 0

Views: 469

Answers (2)

SeyyedKhandon
SeyyedKhandon

Reputation: 6093

you defined a get function which is takes two function in parameters, but you passed one function to it, which the error shows you the failcallback isnot a function: enter image description here

and consider that You are not inside a component, so this.$store does not work. if you export store like below: store.js

export const store = new Vuex.Store({
//everything is inside
})

you should use:

import {store} from './store'

or if you used export default, then you should use:

import store from './store'

then use like below:

store.getters.isAuthenticated

as explained in this topic by linusburg: https://forum.vuejs.org/t/how-to-use-vuex-in-router/13520

Upvotes: 1

Nafees Anwar
Nafees Anwar

Reputation: 6598

Your callback is throwing error which is caught by the catch block. The catch block is trying to call failedCallback which you are not providing to getShop. Thats why it is raising type error for failedCallback.

Uncaught (in promise) TypeError: failedCallback is not a function

Original cause of the error is this.$store. Store is not available in router by this.

You need to import store in router file like this.

import store from '<whereever store is defined>'

store.dispatch('getBackground', false);

or import Vue and access store from protptype like this.

import Vue from 'vue'

Vue.prototype.$store.dispatch('getBackground', false);

Upvotes: 1

Related Questions