Reputation: 14439
Currently I have a component that has a computed property that updates from the Vuex store. This part works perfectly. What I'm confused about is once that computed property updates, I have to always tweak the data accordingly for my view. WHat is the best way to achieve this?
For example:
My component has:
computed: {
players: function() {
return this.$store.state.players;
},
I previously had a function setupPlayers(data)
that tweaked this info and provided it for the view.
My question now is if computed players changes I'd like to run a function that tweaks the data for the view. How do I do this? OR is my approach incorrect?
Upvotes: 10
Views: 11299
Reputation: 55674
You should make data you are updating a computed property and have it dependant on the players
computed property:
computed: {
players: function() {
return this.$store.state.players;
},
myData: function() { // will update automatically whenever this.players changes
var players = this.players;
// do something players data
}
}
If you're unable to make that data a computed property for any reason, then you could also just use a watcher:
watch: {
players: function(value) {
// update your data
}
}
Upvotes: 7
Reputation: 17940
There are 2 approaches here:
You can run any logic in the computed property before returning it, as long as you are not performing async or heavy operations, so you can just manipulate the players array in the computed:
computed: {
players: function() {
var players = this.$store.state.players;
//do something here
....
return players;
},
Upvotes: 2