vue.js - 如何使用 vuejs / composition-api 使用 $http？

Question

我正在尝试使用组合 API 重构一些组件。有一个函数需要发送请求。

由于无法访问thisonsetup(props, context)我认为我可以像向 parent ( )发出context事件时一样使用此参数，但情况似乎并非如此。context.emit()

使用context时出现错误：

Error in v-on handler: "TypeError: context.http is undefined""

使用时出现错误：

Error in v-on handler: "TypeError: _this is undefined"

这是我想要实现的一个片段：

context.http.post('/url'), { data })
  .then(({ data }) => {
    console.log(data)
  });

Answer 1

您可以使用vue-resource如下，context.parent是this关键字。这是codeandbox链接

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCompositionApi from "@vue/composition-api";
import VueResource from "vue-resource";

Vue.use(VueCompositionApi);
Vue.use(VueResource);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

你的组件.vue

<template>
  <div id="app"></div>
</template>

<script>
import { onMounted } from "@vue/composition-api";
export default {
  setup(props, context) {
    onMounted(async () => {
      await context.parent.$http
        .get("https://jsonplaceholder.typicode.com/todos/")
        .then(response => console.log(response.data));
    });
  }
};
</script>