If you're wondering why a `computed` property can't be directly overwritten, it's because it functions as an internal calculation rather than a writable data store. To populate your `month` from the VueX store while maintaining writability, consider using a combination of:
- a watcher that monitors changes to `date`, updating the internal `month` data when the store is updated
- an internal data property that permits both writing and reading of `month`
Here is an example implementation:
// Populate internal store with state data
data: function() {
return {
month: this.date.format('M') - 1
}
},
// Map getter
computed: {
...mapGetters(['date'])
},
// Watch for changes to mapped getter
watch: {
date: function(val) {
this.month = this.date.format('M') - 1
}
}
To adhere to the DRY principle, consider abstracting the logic into a separate method:
methods: {
getMonth: function(month) {
return month.format('M') - 1;
}
},
data: function() {
return {
month: this.getMonth(this.date)
}
},
computed: {
...mapGetters(['date'])
},
watch: {
date: function(val) {
this.month = this.getMonth(val)
}
}