63. VUEX Getters基本使用
原创
©著作权归作者所有:来自51CTO博客作者咸咸瑜瑜的原创作品,请联系作者获取转载授权,否则将追究法律责任
getters 是用来存放state更换后的状态的,是用来定义函数的,目前我知道的 : 每个函数都有两个参数,第一个是state,第二个是本身getters 【多一个都不行的 !】。
案例:我state中有一个num是9,有几个组件想取num的平方,如果直接修改是不可观的,因为有些取有想对它做其他操作,,,那么就用getters即可:
有些这样写 虽然可以 但是..
所以你只需要在getters中定义函数 然后返回 num 的平方根即可:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const myVuex = new Vuex.Store({
state:{num:9},
mutations:{
},
getters:{
numSquare(state){ //第二个参数是 本身getters ,用时在写即可
return state.num * state.num;
}
},
actions:{},
modules:{},
});
export default myVuex //导出VUX对象
index.js 【vuex配置文件】
然后你在 模板直接用即可 。
例2: 有几个人的资料存在state中,我现在需要可以用 getters筛选条件 而且 可以打印筛选后的长度
详细看代码 我封装的非常好了:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const myVuex = new Vuex.Store({
state:{
user:
[
{name:"肖丽雅",age:18,hobby:'Basketball',birthday:'1996-5-16'},
{name:"张飞",age:33,hobby:'Football',birthday:'1999-6-12'},
{name:"刘备",age:62,hobby:'badminton',birthday:'2002-5-20'},
{name:"李晓雨",age:19,hobby:'Volleyball',birthday:'1995-5-16'},
{name:"张艳艳",age:36,hobby:'run',birthday:'1876-5-16'},
]
},
mutations:{
},
getters:{
Less(state){ //这个算法务必看懂 其实就是 传参数age进来。
return age =>{ //返回一个函数 参数是age
return state.user.filter(s => s.age < age) //返回小于20岁的人
}
}
},
actions:{},
modules:{},
});
export default myVuex //导出VUX对象
index.js 【vuex配置文件】
<template>
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>生日</th>
</tr>
</thead>
<tbody>
<tr v-for="(item) in $store.state.user">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.hobby}}</td>
<td>{{item.birthday}}</td>
</tr>
</tbody>
</table>
<h1>年龄大于20岁的有:</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>生日</th>
</tr>
</thead>
<tbody>
<tr v-for="(item) in $store.getters.Less(20)"> <!--主要逻辑 返回小于20岁的-->
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.hobby}}</td>
<td>{{item.birthday}}</td>
</tr>
</tbody>
</table>
<h2>个数: {{$store.getters.Less(20).length}}</h2> <!--主要逻辑 返回小于20岁的个数-->
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
table{
border: 1px black solid;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: 1px solid black;
text-align: left;
}
th{
background-color: #f7f7f7;
color: black;
font-weight: 600;
}
</style>
App.vue App组件
运行:
作者:咸瑜