CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuex
KingKongFrog
KingKongFrog

Reputation: 14439

Best way to execute function once computed property updates

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

Answers (2)

thanksd
thanksd

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

Tomer
Tomer

Reputation: 17940

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

Upvotes: 2

Related Questions