Vue.js vif 未在计算(computed)属性上触发

我有一家vuexstore .在vuexstore 中更改状态首选项.我想重播DOM.我希望每次vuex存储中的状态首选项更改时都调用checkValue方法.

指数html

<div id="app">
    <my-component></my-component>
    <my-other-component></my-other-component>
</div>

vue已初始化，store 也在此处导入

我的_组件.js

Vue.component('my-component',require('./我的成分.vue'));
import store from "./百货store js"
Vue.component('my-other-component',require('./肌肉治疗成分.vue'));
import store from "./百货store js"

new Vue({
    el : "#app",
    data : {},
    store,
    method : {},
})

当存储区中的状态首选项发生变化时，需要更改DOM的组件

我的成分.vue

<template>
    <div v-for="object in objects" v-if="checkValue(object)">
        <p>hello</p>
    </div>
</template>


<script>
    methods : {
        checkValue : function(object) {
            if(this.preference) {
                // perform some logic on preference
                // logic results true or false
                // return the result
            }
        }
    },

    computed : {
        preference : function() {
            return this.$store.getters.getPreference;
        }
    }


</script>

Vuex存储文件

百货store js

const store = new Vuex.Store({
state : {
    preferenceList : {components : {}},
},
getters : {
    getPreference : state => {
        return state.preferenceList;
    }
},
mutations : {
    setPreference : (state, payload) {
        state.preference['component'] = {object_id : payload.object_id}
    }
}

单击li元素时更新vuex存储的组件.

肌肉治疗成分.vue

<div>
    <li v-for="component in components" @click="componentClicked(object)">
    </li>
</div>


<script type="text/javascript">
    methods : {
        componentClicked : function(object) {
            let payload = {};
            payload.object_id = object.id;
            this.$store.commit('setPreference', payload);
        }
    }
</script>