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

Question

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

因为在 setup(props, context) 上无法访问 this 我想我可以使用这个 context 参数就像我在 emitting 时一样parent (context.emit()) 的事件，但事实并非如此。

使用context时出错：

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

使用this时出错:

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 关键字。 Here 是 codesandbox link

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");

YourComponent.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>

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

How to use the $http using vuejs / composition-api?

vue.js

vuejs2

vue-composition-api