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

问题描述

我有一堆类绑定语句:

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

这里是上面提到的方法:

Here's the method referred to above:

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

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

...and the computed property the method is looking at:

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

处于 Vuex 状态.

Which is in the Vuex state.

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

The problem is, these properties aren't updating when one of the dropdowns with the above class binding is clicked on. If I navigate to another route and then back, the active class has been applied just fine. Can I force the computed property to recompute so the class is applied immediately?

我知道添加属性不会触发反应性，但根据此，如果我用新的对象替换对象，则应保持反应性.好吧，这就是我正在做的:

I understand that adding properties won't trigger reactivity, but according to this, if I replace the object with a fresh one, reactivity should be maintained. Well here's what I'm doing:

state.activeFilters = query;

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

...replacing the object. I am stumped.

推荐答案

由于 JavaScript 的限制，有些 Vue 无法检测到数组和对象的更改类型.您可以在此处阅读更多相关信息:https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Due to limitations in JavaScript, there are types of changes that Vue cannot detect with arrays and objects. You can read more about it here: 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>

这篇关于计算属性未从 Vuex 存储对象更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！