如何使用 vue 中的组合 api 将输入值正确传递给函数？

Question

我有一个包含邮政编码的输入字段。提交时，我想将邮政编码作为对象传递给 axios 请求。我在这里创建了一个 CodeSandbox：https://codesandbox.io/s/determined-beaver-8ebqc

相关代码为：

App.vue

<template>
  <div id="app">
    <input v-model="postcode" type="text" placeholder="Enter Postcode">
    <button @click="getAddress">Submit</button>
  </div>
</template>

<script>
  import useAxios from "@/composition/use-axios";

  export default {
  name: "App",
  setup() {
    const { sentData, response, fetchData } = useAxios(
      "api/address/lookup-address",
      "postcode",
      "Failed Finding Address"
    );
    return {
      postcode: sentData,
      address: response,
      getAddress: fetchData
    };
  }
};
</script>

使用-axios.js

import { reactive, toRefs } from "@vue/composition-api";
import axios from "axios";

export default function (url, objectData, errorMessage) {
  const state = reactive({
    sentData: null,
    response: null
  });
  const fetchData = async () => {
    console.log("Sent Data:", state.sentData);
    console.log("Response:", state.response);
    console.log("URL:", url);
    console.log("Object Data:", objectData);
    console.log("Object:", { [objectData]: state.sentData });
    console.log("Error Message:", errorMessage);
    const config = { headers: { "Content-Type": "application/json" } };
    try {
      const res = await axios.post(url, [objectData]: state.sentData, config);
      state.response = await res.data;
    } catch (error) {
      // Error handling stuff
    }
  }

  return { ...toRefs(state), fetchData };
}

以这种方式将邮政编码输入字符串转换为对象似乎很老套。此外，如果我需要向 axios 请求发送多个参数，这会变得非常混乱。假设我想传递 { id: "1234", user: "Me" }，我希望能够像这样构建：

sentData = { id: ${id}, user: ${user} }

但是我做不到。执行此操作的正确方法是什么，以便我可以保持 use-axios 通用？

Answer 1

您需要从 composition-api 导入 ref、reactive 和 computed，然后像这样使用它们：

<script>
import useAxios from "@/composition/use-axios";
import { ref, reactive, computed } from "@vue/composition-api";

export default {
  name: "App",

  setup() {
    let object = ref("");
    let state = reactive({ postcode: "" });
    const sentDataObject = computed(() => {
      state.postcode = object;
      return state;
    });
    const addressList = useAxios(
      "api/address/lookup-address",
      sentDataObject.value,
      "Failed Finding Address"
    );

    return {
      addresses: addressList.response,
      postcode: object,
      getAddress: addressList.fetchData
    };
  }
};
</script>

将 use-axios.js 更改为：

import { reactive, toRefs } from "@vue/composition-api";
import axios from "axios";

export default function (url, objectData, errorMessage) {
  const state = reactive({
    sentData: null,
    response: null
  });
  const fetchData = async () => {
    console.log("Sent Data:", state.sentData);
    console.log("Response:", state.response);
    console.log("URL:", url);
    console.log("Object Data:", objectData);
    console.log("Error Message:", errorMessage);
    const config = { headers: { "Content-Type": 
"application/json" } };
    try {
      const res = await axios.post(url, objectData, config);
      state.response = await res.data;
    } catch (error) {
      // Error handling stuff
    }
  };
  return { ...toRefs(state), fetchData };
}

在此处查看 Codesandbox 演示：https://codesandbox.io/s/dawn-glade-ewzb7

如何使用 vue 中的组合 api 将输入值正确传递给函数？

How to properly pass input values to a function using the composition api in vue?

vue-composition-api