Question

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

例如：

我的组件有：

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

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

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

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

Answer 2

这里有两种方法：

不要直接从州访问数据，而是通过getter访问数据，然后获取者可以在返回数据之前对其进行操作。

您可以在返回计算属性之前运行任何逻辑，只要您不执行异步操作或繁重操作，这样您就可以操作计算中的players数组：

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

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

2 个答案: