Vue.js 计算属性未从Vuex存储对象更新

我有一堆类绑定语句：

: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状态

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

我理解添加属性不会触发反应性，如果我用新的对象替换对象，则应保持反应性。我现在做的是：

state.activeFilters = query;

---

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

想明白了。在我的函数之后，我需要此命令来强制组件重新渲染：

this.$forceUpdate();

---

由于JavaScript的限制，Vue无法通过数组和对象检测到某些类型的更改。您可以在此处阅读更多信息：

一个简单的解决方案是使用计算属性创建一个方法：

之前：

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

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

导出默认Vue.extend({
.
.
.
计算：{
项目（）{
返回此.storedItems
},
}
}

之后：

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

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

导出默认Vue.extend({
.
.
.
方法：{
项目（）{
返回此.storedItems
},
}
}

此。$forceUpdate（）

是一种不好的做法。它甚至没有文档记录。我认为你做错了什么。这不是角度。你应该避免这种情况。你能提供关于jsfidde/jsbin/codepen的完整示例吗？我的意思是基本上所有相关的内容都在上面-我是从一个从状态复制的本地对象派生计算属性。当状态发生变化时，它会直到我重新渲染，计算属性才会更新-或者是通过我新发现的（正如您所说的未记录的）方法，或者通过路由离开然后返回。@daninthemix我认为如果可能的话，您应该找到一种方法，尽可能多地使用计算属性，而不是方法调用。方法调用在其依赖数据更改时不会像计算道具那样重新运行。例如，在本例中，

isActiveStatus

可能是字典contai为每个活动的

键设置
{key:true}
。然后可以使用
:style=“{active:isActiveStatus[status.id]}”
。澄清一下，我认为没有触发反应性，因为
isActive
是一种方法。你对
activeFilters
的仔细处理无法回避这一点。如果你使用的是Vuex，为什么要直接调用你的状态？你应该使用getter，或者至少使用mapState来调用你的状态。这整个过程都很简单g似乎是一个坏习惯。