Question

我有一个vuex商店。在vuex商店中改变国家偏好。我想重新渲染DOM。我希望每次vuex商店中的状态首选项发生变化时都会调用checkValue方法。

的index.html

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

初始化了vue，并且还在此处导入了商店

my_component.js

Vue.component('my-component',require('./MyComponent.vue'));
import store from "./store.js"
Vue.component('my-other-component',require('./MyOtherComponent.vue'));
import store from "./store.js"

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

组件，其中DOM需要在商店中的状态首选项更改时更改

MyComponent.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存储的组件。

MyOtherComponent.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>

Answer 1

方法不是被动的，这意味着它们不会跟踪变化并在发生变化时重新运行。这就是你计算的内容。

所以这意味着你需要使用一个计算器来计算你需要的东西，但是计算器不接受参数并且你需要这个对象，所以解决方案就是创建另一个接受对象作为属性的组件，然后执行那里的逻辑：

<强> MyOtherComponent.vue：

<template>
    <div v-if="checkValue">
        <p>hello</p>
    </div>
</template>


<script>
    props:['object','preference']
    computed : {
        checkValue : function() {
             if(this.preference) {
               // perform some logic on preference
               // logic results true or false
               return true
             }

             return false
        }
    }


</script>

然后在原始组件中：

<template>
    <my-other-component v-for="object in objects" :object="object" :preference="preference">
        <p>hello</p>
    </my-other-component>
</template>

Answer 2

v-if不应包含函数调用。只是函数的存在可能会导致v-if始终为真。 v-if应该测试一个变量或一个计算属性，它应该有一个名词，而不是一个动词！如果checkValue只是代理偏好，为什么需要它。为什么不只是v-if="preference"？

Answer 3

我认为你的主要问题是你的变异：VueJS在初始化过程中创建了反应所需的一切，所以当你尝试使用带有变异有效负载的新对象覆盖它时，你的state.components对象已经被初始化了。然后没有配置反应性（见https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats）。

尝试将您的突变更改为：

mutations: {
  setPreference (state, payload) {
    Vue.set(state.preferenceList.components, 'object_id', payload.object_id);
  }
}

v-如果未在计算属性上触发

3 个答案: