The following code is used in two different components, so please avoid using props. Utilize data variables and largely similar methods but with different component templates.
<template>
</template>
<script>
export default {
name: "abc",
data() {
return {
address: {
billing: {
address1: [],
first_name: "",
last_name: "",
email: "",
phone: "",
city: "",
postcode: ""
},
},
};
},
created() {
},
mounted() {
},
updated() {
},
methods: {
xyz() {},
},
};
</script>
What is the best approach to handle this? The vueJs3 Composite API setup() hook provides the optimal solution for this scenario.
However, as I am using Vue.js 2, how can I achieve this without duplicating the declaration of data variables and methods?
One suggested method is to utilize a service class (JavaScript Class).
Service Name: utils.js
For example, use
this.utils.address.billing.address1this.utils.xyz();
but I prefer accessing them directly like this.address.billing.address1; and this.xyz();