无法从另一个 .vue 文件调用此函数

Question

我在尝试从另一个 .Vue 文件调用 getPriceInitiator 时收到 TypeError: x is not a function。

<template>
      <div id="container">
        <p style="color: red">{{ apiCallResponse }}</p>
      </div>
    </template>
    
    <script>
    import { SfButton } from "@storefront-ui/vue";
    import { getExternalPrice } from "~/serverMiddleware/customExtension/index.js";
    
    export default {
      name: "intergration",
      components: {
        SfButton,
      },
      data() {
        return {
          apiCallResponse: "",
          exampleUserId: "test@email.com",
          exampleProductId: 1234,
        };
      },
      methods: {
        getPriceInitiator(userId, productId) {
          getExternalPrice(userId, productId)
            .then((data) => {
              this.apiCallResponse = "€" + data.key;
            })
            .catch((err) => console.log(err));
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .h1 {
      color: red;
    }
    </style>

我是这样使用的：

import { getPriceInitiator } from "~/plugins/intergration.vue";
export default defineComponent({
  name: "ProductPage",
  components: {
    ...
  },
  mounted() {
    this.infoLoggerMethodForDebugging();
  },
  methods: {
    infoLoggerMethodForDebugging() {
      console.log("test");
      getPriceInitiator("value1", "value2");
    },
  },

（当我注释掉 getPriceInitiator 时，它没有给出任何错误）

Answer 1

为您的全局方法创建一个单独的 .js 文件。

import { getExternalPrice } from "~/serverMiddleware/customExtension/index.js";

export const getPriceInitiator = (userId, productId) => {
  getExternalPrice(userId, productId)
    .then((data) => {
      this.apiCallResponse = `€${data.key}`;
    })
    .catch((err) => console.log(err));
};

export default {
  getPriceInitiator,
};

然后在你要使用的组件中导入它

无法从另一个 .vue 文件调用此函数

Can't call this function from another .vue file

methods

import

function

vue.js