vuex中的getters

vuex中的getters与vue中的computed计算属性十分相似，在vuex中的Store仓库里，state就是用来存放数据，而getters类似于computed计算属性，也可以对数据进行处理，getters可以对store中的数据进行相应的处理，在调用getters时就会返回处理后的结果。

1.语法

//语法一
getters:{vName:function(state){},   //state传入的是vuex中的state对象vName2:function(state，getters){}  //getters传入的是getters对象
}//语法二
getters:{vName(state){},vName2(state，getters){}
}

2.示例

2.1 过滤小于5的数

const store = Vuex.Store({state:{lis:[1,2,3,4,5,6,7,8]},getters:{filtedList: state = >{return state.lis.filter(lisitem => lisitem > 5)}}});

2.2统计lis2的大于5的个数

const store = Vuex.Store({state:{lis:[1,2,3,4,5,6,7,8],lis2:[3,4,5,6,7,8,9]},getters:{filtedLis: state = >{return state.lis.filter(lisitem => lisitem > 5)},filtedLis2: state = >{return state.lis.filter(lisitem => lisitem > 5)},//通过getters获取getters中的其他数据getlisLength:(state,getters) =>{return getters.filtedLis2.length}}});

2.3过滤小于自定义的数

这里可能有点难懂，我逐步解析：$store.getters.filtedList返回的是一个函数，而函数接受一个num参数，而这个函数过滤掉了state中的lis中小于num的值。

$store.getters.filtedList 代表的是一个函数function(num)
$store.getters.filtedList(2) 调用函数function(num)并传入数字2
state.lis.filter(item => item >= num) 执行函数并过滤掉lis小于2的数据，并返回数组

<!--某组件用到这个$store.getters-->
<template><div><!--传入2，过滤小于2的数--><h1>{{$store.getters.filtedList(2)}}</h1></div>
</template>const store = Vuex.Store({state:{lis:[1,2,3,4,5,6,7,8]},getters:{filtedList(state){return function(num){return state.lis.filter(item => item >= num)}}}
});

vuex中的getters相关推荐

Vuex中state,getters,mutations的使用方法以及辅助函数的原理
Vuex是是一个程序里面的状态管理模式,它是集中式存储所有组件的状态的小仓库,并且保持我们存储的状态以一种可以预测的方式发生变化. state中存放的是全局变量,定义如下 state: {//存放全局 ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
4.vuex学习之getters、mapGetters
gettters可以理解为计算属性在store.js中 import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)//访问状态对象 cons ...
Vuex中的核心方法
Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.每一个Vuex应用的核心就是 ...
vue 将数据保存到vuex中
在项目中遇到这样一个问题,就是在登入的时候同时需要从后台获取到左边的导航,但是如果使用h5的localStorage来保存导航信息,会出现app加载进去之后localStorage才保存进浏览器,在m ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
Vuex中的Getter的使用
1.Getter的作用 1.传入一个参数(state) 在getter中接受的第一个参数是Vuex中的state 有时候,我们需要从store中获取一些state变异后的状态 getters: {po ...

vuex中的getters

vuex中的getters

1.语法

2.示例

2.1 过滤小于5的数

2.2统计lis2的大于5的个数

2.3过滤小于自定义的数

vuex中的getters相关推荐

最新文章

热门文章