Mixins

// बेसिक Mixin उदाहरण: लॉगिंग और काउंटर
const loggerMixin = {
data() {
return {
logCount: 0
};
},
methods: {
logMessage(message) {
this.logCount++;
console.log(`[LOG-${this.logCount}]`, message);
}
},
created() {
this.logMessage("Mixin ने कंपोनेंट क्रिएट होने पर सक्रिय किया");
}
};

const app = Vue.createApp({
mixins: [loggerMixin],
data() {
return {
userName: "अंजलि"
};
},
methods: {
greetUser() {
this.logMessage(`नमस्ते, ${this.userName}`);
}
},
mounted() {
this.greetUser();
}
});

app.mount("#app");

// Advanced Mixin: API data fetch, cache और error handling
const dataFetcherMixin = {
data() {
return {
isLoading: false,
cache: {},
fetchErrors: []
};
},
methods: {
async fetchData(endpoint) {
try {
if (this.cache[endpoint]) {
return this.cache[endpoint];
}
this.isLoading = true;
const response = await fetch(endpoint);
if (!response.ok) {
throw new Error("डेटा fetch विफल");
}
const result = await response.json();
this.cache[endpoint] = result;
return result;
} catch (error) {
this.fetchErrors.push(error.message);
console.error("Error:", error.message);
} finally {
this.isLoading = false;
}
},
async loadUserData() {
const endpoint = "[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)";
const data = await this.fetchData(endpoint);
if (data) {
this.users = data.slice(0, 5);
}
}
},
created() {
this.loadUserData();
}
};

const appAdvanced = Vue.createApp({
mixins: [dataFetcherMixin],
data() {
return {
users: []
};
},
mounted() {
console.log("Loaded users count:", this.users.length);
}
});

appAdvanced.mount("#app");