Ошибка типа: невозможно прочитать свойство '$ http' из неопределенного - PullRequest
Новая
       23

Ошибка типа: невозможно прочитать свойство '$ http' из неопределенного

0 голосов
/ 16 декабря 2018

Пытаюсь использовать vue-ресурс, но я пытаюсь описать ошибку, описанную в заголовке.Код ниже находится в разделе утилит, который называется network.js: 

import VueResource from 'vue-resource'

const getConfig = () =>{
  console.log('its working');
  // GET /someUrl
  this.$http.get('https://fdsdfsdf-685a-45ed-8665-9847e0dbce0d.mock.pstmn.io/getConfig')
  .then(response => {

    // get body data
    this.config = response.body;

   }, response => {
     // error callback
   });
};

//Export login so other classes can use it
export{
  getConfig
}

И этот код вызывается.Он существует на одном из моих маршрутов под названием Admin.vue: 

<template>
  <div class="admin">
    <h1>This is admin page area</h1>
    <p>This is the data: {{this.config}}</p>
  </div>
</template>

<script>

import{getConfig} from "../utils/network";

export default{

  data: function () {
    return {
      config: [{}]
    }
  },
  created:function(){
      getConfig();
    }
}
</script>

Я использую его, как они описывают в примере, я не совсем уверен, что мне не хватает?

1 Ответ

0 голосов
/ 16 декабря 2018

  • network.js отсутствует вызов Vue.use(VueResource), как задокументировано для проектов Webpack: 

    import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

  • И getConfig() - это функция стрелки, которая постоянно связывает лексический this (вызывающие абоненты не могут повторно связать this), а this равен undefined в области действия network.js.

    Если вы хотите, чтобы вызывающие (то есть компоненты) указывали себя в качестве контекста через Function.prototype.call, вам нужно было бы объявить getConfig как обычную функцию:

    // network.js
const getConfig = function() { ... }  // option 1
function getConfig() { ... }          // option 2

// MyComponent.vue > script
import { getConfig } from '../utils/network.js'

export default {
  created() {
    getConfig.call(this)
  }
}

    demo

    Другим решением является использование mixins , чтобы вы могли вызывать this.getConfig() (без передачи контекста): 

    // network.js
const getConfig = function() { ... }  // option 1
function getConfig() { ... }          // option 2

const getConfigMixin = {
  methods: {
    getConfig
  }
};

export { getConfigMixin }

// MyComponent.vue > script
import { getConfigMixin } from '../utils/network.js'

export default {
  mixins: [getConfigMixin],
  created() {
    this.getConfig()
  }
}

    демо

...