计算属性更新后执行函数的最佳方法

时间:2017-09-18 14:47:44

标签: vue.js vuejs2 vue-component vuex

目前我有一个具有可从Vuex商店更新的计算属性的组件。这部分很完美。我感到困惑的是,一旦计算出属性更新,我必须总是相应地调整数据以供我查看。什么是达到这个目标的最好方法?

例如:

我的组件有:

    computed: {
        players: function() {
            return this.$store.state.players;
        },

我之前有一个函数setupPlayers(data),它调整了这个信息并为视图提供了它。

我现在的问题是,如果计算的玩家改变了,我想运行一个调整视图数据的函数。我该怎么做呢?或者我的方法不正确?

2 个答案:

答案 0 :(得分:1)

您应该使您正在更新计算属性的数据并使其依赖于players计算属性:

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

如果您因任何原因无法将该数据设为计算属性,那么您也可以使用watcher

watch: {
  players: function(value) {
    // update your data
  }
}

答案 1 :(得分:0)

这里有两种方法:

  1. 不要直接从州访问数据,而是通过getter访问数据,然后获取者可以在返回数据之前对其进行操作。
  2. 您可以在返回计算属性之前运行任何逻辑,只要您不执行异步操作或繁重操作,这样您就可以操作计算中的players数组:

    computed: {
        players: function() {
            var players = this.$store.state.players;
            //do something here
            ....
            return players;
        },