Почему вылазит ошибка «Cannot read property '$http' of undefined» в Vue?

Question

[Анна Шатковская]

При обновлении страницы в браузере или с помощью F5 вылазит ошибка:

В чем проблема, помогите, пожалуйста, разобраться.
Код в app.vue:

import { GET_WAYBILLS } from './store/actions/waybills.js'
import { mapGetters } from 'vuex'

  export default {
    name: 'App',
    components: {
      Navigation,
    },
    computed: {
      ...mapGetters(['isAuthenticated', 'isMenu', 'urlServer', 'waybills']),

    },
    created() {
      this.getWaybills()
    },
    watch: {
      '$route': 'getWaybills'
    },
    methods: {
      getWaybills() {
        if (this.isAuthenticated && (this.urlServer != '') && (this.waybills == '')) {
          this.$store.dispatch(GET_WAYBILLS).then(() => {
            this.$router.push('/')
          })
        }
      }
    }
  }

Код в main.js:

import VueResource from 'vue-resource'
Vue.use(VueResource)

Код в модуле Vuex:

import mainVue from '../../main.js'
const actions = {
  [GET_WAYBILLS]: ({
                     commit,
                     rootGetters
                   }) => {
    return new Promise((resolve, reject) => {
      mainVue.$http.get(rootGetters.urlServer+'waybills', {
        headers: {
          'Content-Type': 'application/json',
          'x-api-token': localStorage.getItem('user-token'),
        },
      }).then(response => {
        commit(GET_WAYBILLS, response.body)
        resolve(response.body)
      }, response => {
        reject(response)
      })
    })
  }
}

Answer 1

[Анна Шатковская]

Решение проблемы:
Код в модуле Vuex:

import Vue from 'vue' 
...
 Vue.http.post

Answer 2

[shmatuan]

Это точно весь код в main.js ?

import VueResource from 'vue-resource'
Vue.use(VueResource)

судя по ошибке - import mainVue from '../../main.js' просто ничего не возвращает, поэтому в main.js должно быть export default Vue

Или использовать через this.$http

Comments

[Pantene742]

Тоесть через this.$http ? передавать не стрелочную функцию а обычную в которой в области видимости this из окружения куда передали call back ?

[Анна Шатковская]

это, конечно не весь код в main.js.
вот весь:

import Vue from 'vue'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
import App from './app.vue'
import router from './router/router.js'
import store from './store/store.js'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon.vue'

Vue.use(BootstrapVue)
Vue.use(VueResource)
Vue.component('v-icon', Icon)

Vue.config.productionTip = false

export default new Vue({
  el: '#app',
  router,
  store,
  components: {
    App,
  },
  template: '<App/>',
})

Так же код из модуля на получение данных вызывается и в другом модуле vuex после авторизации, там никогда ошибок не возникает, вызывается следующем образом:
dispatch(GET_WAYBILLS)

[Анна Шатковская]

Pantene742, this.$http.get будет работать, если вы пишите код в компонентах. Если в Vuex-модулях, то нужно делать с помощью экземпляра Vue.
Почему только возникает ошибка у меня, так до сих пор не понимаю, аналогично на авторизации с методом post никаких ошибок нет.