Question

我正在使用vue CLI，并且创建了多个组件

app.vue

import home_tpl from './home.vue';

new vue({
    el : '#app',
    components : { home_tpl },
    created(){
        this.$store.subscribe((mutation) => {
            switch(mutation.type){
                case 'listing':
                    alert();
                break;
        });
    }
})

然后我也有一个监听home.vue的人

home.vue

export default{
    created(){
        this.$store.subscribe((mutation) => {
            switch(mutation.type){
                case 'listing':
                    alert();
                break;
        });
    }
}

问题是当我this.$store.commit('listing',1);进行两次this.$store.subscribe((mutation) => {触发时，这是预期的行为，因为我从不同的文件中两次侦听该事件，有没有办法使每个组件仅触发一次？我之所以将变异监听器称为home.vue的原因是，因为有一个事件我只想专门针对该组件运行。

有什么想法，请帮忙？

Answer 1

您的示例代码同时监听listing和app.vue的{{1}}变化，但是根据您的帖子，似乎他们对不同类型的变化感兴趣？

如前所述，如果您只对少数更改而不是对商店的更改进行全部更改，那么home.vue应该是一种更好的方法。像这样：

watch

区别是：

只要存储中发生更改，就会调用// home.vue new vue({ el : '#app', components : { home_tpl }, created(){ this.$store.watch((state, getters) => state.stateHomeIsInterested, (newVal, oldVal) => { alert() }) } }) // app.vue export default{ created(){ this.$store.watch((state, getters) => state.stateAppIsInterested, (newVal, oldVal) => { alert() }) } }回调（在您的情况下，这可能会浪费一些不必要的回调调用）。回调方法接收变异和更新后的状态作为参数
subscribe仅对在其第一个参数中定义的getter返回值的更改做出反应，并且回调函数将新值和旧值作为参数接收。如果需要，您可以查看多种状态。

Vuex突变订阅多次触发

1 个答案: