计算属性更新后执行函数的最佳方式答案

【问题标题】：Best way to execute function once computed property updates计算属性更新后执行函数的最佳方式
【发布时间】：2018-02-27 03:56:16
【问题描述】：

目前我有一个组件，它具有从 Vuex 存储更新的计算属性。这部分工作完美。我感到困惑的是，一旦计算属性更新，我必须始终为我的视图相应地调整数据。实现这一目标的最佳方法是什么？

例如：

我的组件有：

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

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

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

【问题讨论】：

由于您使用的是计算属性，一旦您更新了状态，它应该会自动更新视图，您会看到不同的行为吗？
计算的主要用例是计算派生数据（“调整”它）。为什么不在你已经拥有的计算中做呢？

标签： vue.js vuejs2 vue-component vuex

【解决方案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
  }
}

【讨论】：

问题中提到，它是一个计算属性
您可以查看计算属性。 OP 正在询问如何在计算属性更新时更新单独的数据。
计算的行为就像一个观察者，那么观察它的意义何在？
是的，在这种情况下，我认为根据第一个计算另一个比使用观察者更好。但总的来说，我不会将代码放在不影响返回值的计算属性的函数中。因此，例如，如果 OP 需要在其计算属性更改时进行 api 调用，我会说将其放入观察者中比在计算属性的定义中更有意义。无论哪种方式都可以，但更容易理解 IMO。

【解决方案2】：

这里有两种方法：

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

你可以在返回之前在计算属性中运行任何逻辑，只要你不执行异步或繁重的操作，所以你可以在计算中操作玩家数组：

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

【讨论】：

确保没有修改players数组，否则需要先进行深度克隆。如果您真的想更改存储值，或者提交一个变更。