Best way to execute function once computed property updates

Question

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?

Answer 1

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
  }
}

Answer 2

There are 2 approaches here:

1. Don't access the data directly from the state, but rather via a getter, and then the getter can manipulate the data before returning it.

2. 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;
       },