解决$store.getters调用不执行的问题

使用Vuex的时候，经常需要调用store的getters来获取store中存储的数据。然而，在某些情况下，调用getters却不执行，导致无法获取到想要的数据。本文将从以下几个方面逐一分析出现这种问题的原因，并提出解决方案。

1. getters的命名规则不符合规范

Vuex中getters的命名规范是由state的key和value组成的。举个例子，如果我们有一个state如下：

state:{
    count:0
}

则getters对应的命名应该为：

//正确的写法
getters:{
    getCount:state => state.count
}

如果我们把getters写成如下形式：

//错误的写法
getters:{
    count:state => state.count
}

这种写法是不符合Vue的命名规范的，因此会导致getters调用无效。解决此问题的方法就是按照规范正确命名getters。

2. getters的调用方式不正确

有时候我们可能会在getters中返回一个函数。此时，需要在调用getters时加上括号才能正确执行，否则会返回一个函数而不是值。举个例子：

getters:{
    getCount:state => {
        return (id)=>{
            return state.list.find(item => item.id == id).count;
        }
    }
}

//调用方式应该为
let count = store.getters.getCount(1);

//而不是
let countFn = store.getters.getCount;
let count = countFn(1);

只有在调用getters时加上括号，才能使其执行。如果不加括号，它会返回一个函数，而非预期的值。

3. getters被缓存了

还有一种情况是，getters被缓存了，并且当state数据没有改变时，不会重新执行。这就导致了我们调用getters时无法获取实时数据的问题。例如，下面的代码：

getters:{
    getCount:state => {
        return state.list.filter(item => item.count > 0).length;
    }
}

如果我们多次调用getters.getCount方法，当state中list数组没有改变时，getters.getCount不会重新执行，而是返回之前缓存的值。如果需要每次调用getters都能获取最新的数据，则需要使用Vue提供的$watch方法监控state的变化，并手动调用getters。

解决方法：

let vm = new Vue({
    el:"",
    store,
    computed:{
        count(){
            return this.$store.getters.getCount;
        }
    },
    watch:{
        "count":{
            handler:function(newCount){
                //每次count数据发生变化，都会执行一次此函数
                //在这里手动调用getters.getCount方法
                let count2 = this.$store.getters.getCount;
            },
            deep:true //深度监听
        }
    }
})

4. getters的调用时机不正确

有时候我们可能需要在页面刚加载时，就立即调用getters获取数据。然而，由于Vuex的特殊性，store对象需要在Vue实例化之前初始化，否则getters的调用会失败。因此，我们需要在Vue组件实例中，使用created钩子或mounted钩子来调用getters。

解决方法：

let vm = new Vue({
    el:"",
    store,
    computed:{
        count(){
            return this.$store.getters.getCount;
        }
    },
    created(){
      //此时store已经初始化完毕，可以直接调用getters
      let count2 = this.$store.getters.getCount;
    }
})

总结：

以上就是getters调用不执行的几个主要原因及解决方案。遵循正确的命名规范，正确使用括号调用getters，手动调用getters以确保获取最新的数据，以及在Vue组件实例中使用created或mounted钩子来调用getters，这些方法都可以避免getters调用失败的问题。