TypeError: Cannot read property 'get' of undefined - Vue-resource and Nuxt

Question

been receiveing error like this in my Vuex Store

TypeError: Cannot read property 'get' of undefined

I already have added a plugin for the vue-resource

This is my code that is receiving that error

async getAllStudents({commit}) {
await Vue.$http.get(`/api/students`)
  .then((res) => {
    if (res.status === 200) {
      commit('setAllStudents', res.data)
    }
  }).catch(function(error) {
    console.log(error);
  });

},

Answer 1

Try to use this instead of Vue and try axios:

async getAllStudents({commit}) {
await this.$axios.get(`/api/students`)
  .then((res) => {
    if (res.status === 200) {
      commit('setAllStudents', res.data)
    }
  }).catch(function(error) {
    console.log(error);
  });
},

make sure that your nuxt.config.js looks like :

const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/boussadjra-brahim/'
  }
} : {}

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + 'Boussadjra Brahim',
    title: 'Boussadjra Brahim' || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],

  },

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  ....
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],


  ....
}