计算属性未从 Vuex 存储对象更新答案

【问题标题】：Computed property not updating from Vuex store object计算属性未从 Vuex 存储对象更新
【发布时间】：2017-03-23 15:24:52
【问题描述】：

我有一堆类绑定语句：

:class="{active: isActive('status', status.id)}"

这是上面提到的方法：

isActive: function (param, value) {
    if (!this.activeFilters.hasOwnProperty(param) && value === 'all' && param !== 'type') {
        return true;
    }
...etc
}

...以及该方法正在查看的计算属性：

activeFilters() {
    return this.$store.state.activeFilters;
},

哪个是Vuex状态。

问题是，当单击具有上述类绑定的下拉列表之一时，这些属性不会更新。如果我导航到另一条路线然后返回，则活动类已被应用得很好。我可以强制计算属性重新计算以便立即应用该类吗？

我知道添加属性不会触发反应性，but according to this，如果我用新的对象替换对象，应该保持反应性。好吧，这就是我正在做的事情：

state.activeFilters = query;

...替换对象。我被难住了。

【问题讨论】：

this.$forceUpdate(); 是一种不好的做法。它甚至没有记录。我认为你做错了什么。它不是棱角分明的。你应该避免这种情况。您能否提供有关 jsfidde/jsbin/codepen 的完整示例？
我的意思是基本上所有相关的东西都在上面——我从从状态复制的本地对象派生计算属性。当状态发生变化时，计算的属性在我重新渲染之前不会更新 - 无论是通过我新发现的（正如你所说的未记录的）方法，还是通过路由然后返回。
@daninthemix 我认为如果可能的话，您应该找到一种方法来尽可能多地使用计算属性，而不是方法调用。 AFAIK 方法调用不会在其依赖数据发生变化时重新运行，就像计算道具一样。例如，在这种情况下，isActiveStatus 可以是一个字典，其中包含每个活动的key 的{key: true}。然后你可以使用:style="{active: isActiveStatus[status.id]}"。
澄清一下，我认为没有触发反应性，因为isActive 是一种方法。你对activeFilters 的细心对待是无法避免的。
如果您使用的是 Vuex，为什么要直接调用您的状态？您应该使用 getter，或者至少使用 mapState 来调用您的状态。这整件事似乎是一种不好的做法。

标签： vue.js vuex

【解决方案1】：

由于 JavaScript 的限制，Vue 无法通过数组和对象检测到某些类型的更改。你可以在这里阅读更多信息：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

一个简单的解决方案是从您的计算属性中创建一个方法：

之前：

<Grid v-for="i in items" :items="items" />

<script>
  export default Vue.extend({
    .
    .
    .
    computed: {
      items() {
        return this.storedItems
      },
    }
  }
</script>

之后：

<Grid v-for="i in items" :items="items" />

<script>
  export default Vue.extend({
    .
    .
    .
    methods: {
      items() {
        return this.storedItems
      },
    }
  }
</script>

【讨论】：

【解决方案2】：

想通了。在我的函数之后，我需要这个来强制组件重新渲染：

this.$forceUpdate();

【讨论】：