Currently, I am in the process of developing a VueJS plugin that utilizes instance properties. I find myself needing to reintroduce some reactive values back into VueJS.
After conducting my research:
I have been struggling to grasp the concept behind Object.defineProperty(). My search led me to explore vuex getters initialization as it shares similarities with my logic, however, I am still unable to fully comprehend its functionality.
Illustrative Example :
The following is a code snippet within the prototype of a VueJS file, main.js :
Vue.prototype.$ajax = {
loading: false,
isLoading () {
return this.loading
}
}
Moving on to accessing this from a component, component.vue :
export default {
computed: {
loading () {
return this.$ajax.isLoading()
}
},
created () {
let self = this
setInterval(() => {
console.log(this.loading, this.$ajax.isLoading())
}, 100)
setTimeout (() => {
this.$ajax.loading = true
}, 1000)
}
}
}
Outcome of the Example :
Prior to the setTimeout, we observe false false (as expected), but after the execution of setTimeout, the results display false true (wherein the getter fails to reflect the modification, yet the direct accessor holds the updated value).
Do you have any suggestions for injecting reactivity into my $ajax.isLoading() method?