I get a TypeError: x is not a function when trying to call getPriceInitiator from another .Vue file.

<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: "[email protected]",
          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>

I use it as follow:

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

(when I comment out getPriceInitiator, it's not giving any errors)

CodePudding user response：

Create a separate .js file for your global method.

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,
};

Then import it in the components you want to use it