vue this.$fetch 下面this值无效

在Vue中，this指向当前组件实例，而this.$fetch并不是Vue的内置方法。通常情况下，我们可以通过在组件中使用Vue Resource或者Axios等第三方库来发起网络请求。但无论是哪一种方法，this.$fetch并不是一个合法的方法或属性，因此在使用this.$fetch时，会导致this的值无效。

为了在Vue中发起网络请求，可以通过以下步骤操作：

1. 首先，在Vue项目中引入对应的网络请求库，比如Vue Resource或者Axios。

2. 然后，在Vue组件中使用import语句将网络请求库引入到组件中。

3. 确保网络请求库已经被正确安装，可以通过使用npm或者yarn等包管理器进行安装。

4. 要发起网络请求，可以在Vue组件的methods选项中定义一个方法，然后在该方法中使用网络请求库的相关方法来发送请求。

示例代码如下：

import Vue from 'vue';
import VueResource from 'vue-resource';  // 或者 import axios from 'axios';

Vue.use(VueResource);  // 或者 Vue.use(axios);

export default {
  data() {
    return {
      responseData: null
    };
  },
  methods: {
    fetchData() {
      // 使用Vue Resource发送GET请求
      this.$http.get('https://api.example.com/data')
        .then(response => {
          // 处理响应数据
          this.responseData = response.data;
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });

      // 使用Axios发送GET请求
      // axios.get('https://api.example.com/data')
      //   .then(response => {
      //     // 处理响应数据
      //     this.responseData = response.data;
      //   })
      //   .catch(error => {
      //     // 处理错误
      //     console.error(error);
      //   });
    }
  }
}

在上述示例中，我们首先通过import语句引入了Vue Resource或者Axios库。然后，在methods选项中定义了fetchData方法来发送网络请求，并在该方法中使用Vue Resource或者Axios的相关方法来发送GET请求。当请求成功后，响应数据会被保存在组件的responseData属性中。如果请求失败，可以在catch块中处理错误。值得注意的是，this.$http和axios都是在Vue组件实例上执行的方法，而并非是Vue原生的方法。因此，通过这种方式使用网络请求库，请确保已正确安装并引入对应的库。