There are a lot of data and computed params and methods in a Vue component sometimes, all of them are interconnected. And when I change one parameter, then a few more parameters update with it (data, computed params, especcialy when some parama are changing in the Vuex actions or mutations and it difficult to track them all). And I can't get which ones exactly...
Is it possible to get all parameters which were updated in the updated()?
Please read comments in the simple example below:
<script>
export default {
/**
* This is Basket.vue component
* The basket has some fruits.
*/
data () {
return {
apples: 5,
oranges: 5,
bananas: 5
}
},
/**
* Someone randomly taking one fruit when will see the basket
*/
mounted () {
let randomFruit = Object.keys(this.$data).sort(() => Math.random() - 0.5); // ["oranges", "bananas", "apple"]
this.takeFruit(randomFruit[0]);
},
methods : {
takeFruit(fruit) {
this[fruit]--;
}
},
computed : {
any_apples () {
return this.apples > 0
},
any_oranges () {
return this.oranges > 0
},
any_bananas () {
return this.bananas > 0
},
total () {
return this.apples + this.oranges + this.bananas
}
},
/**
* And there is a question here about updated Vue lifecycle.
* How detect which data of the component exactly has been updated?
* For example, we took one apple, updated params are "apples", "any_apples", "total", how can we get it here?
*/
updated () {
let updated_params = ... ; // how get ["apples", "any_apples", "total"]?
console.log("What exactly updated?", updated_params);
},
}
</script>
