Pass data from vue file to js file in vuejs? - vue.js

Question

In file : Product.vue
beforeCreate() {
const productId = this.$route.params.id;
axios
.get("/localhost/api/product/" + productId)
.then((res) => {
console.log(res.data); // result : {name: 'Iphone', status: 3, quantity: 100, price: 800}
})
.catch((error) => {
console.log(error);
});
},
I have a file productData.js on the same level as Product.vue. Now I want to transfer data of res.data through productData.js, how to do? In other words in productData.js I want to get the result of res.data when I call the API. Thanks.
update :
let data = null;
function initData(apiRes) {
data = apiRes;
console.log(data); // Output: "Hi from server"
// Do something with Data
}
console.log(data) // I want to get data outside the initData function
export { initData };

Answer 1

Simplest way is:
Product.vue
<script>
import { initData } from "./productData.js";
export default {
name: "Product",
props: {
msg: String,
},
data() {
return {
apiRes: "",
};
},
mounted() {
// your api call
this.apiRes = "Hi from server";
initData(this.apiRes);
},
};
</script>
productData.js
let data = null;
function initData(apiRes) {
data = apiRes;
console.log(data); // Output: "Hi from server"
// Do something with Data
doSomethingWithData();
}
function doSomethingWithData() {
// Your app logic that depends on data
// Here data will have value from API
}
// Here data is always null
export { initData };