vuex--Getters的使用

vuex里的getters

(好像最新版本的vuecli没有给出vuex里的getters)

这里的getters相当于vue里的computed计算属性

就是如果在state里定义的属性需要变化时,就在getters里去做变化。

state:{
    
    
    
}
getters:{
    
    
    power(state){
    
    
        return state.counter*state.counter
    },
    more20student(state){
    
    
        return state.student.filter(s=>s.age>20)
    },
    more20length(state,getters){
    
       //可以传两个参数,第二个默认是getters
        return getters.more20student.length
    }//返回年龄大于20的人数
    ,
    
    //还可以返回一个函数,进行动态传值
    moreagestu(state){
    
    
        return function(ages){
    
    
            return state.student.filter(s=>s.age>ages)
        }
    }
}

getters默认是不能传递参数的,如果希望传递参数,那么只能让getters本身返回另一个函数。

使用返回一个函数,在组件里是这样用的

<h3>
    {
   
   {$store.getters.moreagestu(18)}}
    //这里的18就是动态传入的一个参数
</h3>
<h4>
    {
   
   {$store.getters.power}}
</h4>

猜你喜欢

转载自blog.csdn.net/weixin_48931875/article/details/109024429