Question

尝试使用vue-resource，但是我说出标题中描述的错误。下面的代码在utils部分的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>

我正在按照示例中的描述使用它，但我不确定自己缺少什么吗？

Answer 1

network.js缺少对Vue.use(VueResource)的呼叫，就像Webpack项目中的documented一样：
```
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)
```

getConfig()是一个箭头函数，它永久地绑定词法this（调用者cannot rebind 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()
  }
}

demo

TypeError：无法读取未定义的属性“ $ http”

1 个答案: