接上一篇, 这篇介绍Getter的使用.
master分支为最终版本.
每个阶段的讲解都会创建一个分支.
init分支为初始化后配置完成路由的版本.
先举个栗子看一下getter所要解决的问题. 假设在state中存在一个数组array, 而我们需要在指定组件内, 获得数组中age大于18的数据, 并渲染到页面.
array:[
{
name:"lis",
age:19
},
{
name:"zhangs",
age:2
},
{
name:"wangw",
age:22
},
{
name:"zhaol",
age:17
}
]
方式一 : 在每个组件内定义过滤数组的方法, 获得state中完整的数组, 调用过滤方法, 得到想要的数据.
methods:{
// 过滤方法 filterAgeGt18(arr){
return arr.filter((ele, ind) => {
return ele.age > 18;
});
}
},
computed:{
// 获得完整的array, 并调用上述的方法进行过滤 ageArray(){
return this.filterAgeGt18(this.$store.state.array);
}
}
在页面上直接ageArray数组, 即可得到想要的数据,
但是这个方式需要在每个组件内定义过滤的方法.
方式二:既然方式一 存在重复定义的方法, 那我们可以定义一个公共的方法, 在每个组件中引入调用即可. 即在util.js中定义过滤方法.
util.js:
const filterAgeGt18 = (arr) => {
return arr.filter((ele) => {
return ele.age > 18;
});
};
export {filterAgeGt18};
在使用的组件中导入:
import {filterAgeGt18} from "../util/util.js"
在computed里, 获取完整数据后, 传入filterAgeGt18中进行数据过滤:
computed:{ count(){
//获得完整数据后, 使用导入的函数进行过滤 ageArrayUseUtilFunFilter(){
return filterAgeGt18(this.$store.state.array);
},
}
页面使用ageArrayUseUtilFunFilter数组进行渲染, 虽然这样只定义了一次函数, 但是需要在多个地方引入. 也存在不足.
方式三:能实现, 但强烈不建议:将工具函数在main.js中引入, 并将函数挂载到Vue的原型上.
import {filterAgeGt18} from "./util/util.js"
Vue.prototype.f18 = filterAgeGt18;
组件内, 使用this.f18调用函数.
computed:{
ageArrayUseVueProtoFilter(){
return this.f18(this.$store.state.array);
}
}
不建议这样使用, 因为工具函数可能会很多, 很容易将Vue的原型搞乱, 我们一般将axios这样的东西挂到Vue原型上.
既然上述三种方法都存在这样那样的不足, 那么就该完美的解决方案登场了.
Vuex - Getter
getter就解决了上述重复定义和重复引入的缺点. 使用getter实现对数组的过滤.
首先: main.js的store中定义getter.
const store = new Vuex.Store({
state:{
count:13,
anotherCount:17,
array:[
{
name:"lis",
age:19
},
{
name:"zhangs",
age:2
},
{
name:"wangw",
age:22
},
{
name:"zhaol",
age:17
}
]
},
getters:{
gt18 : (state) => {
let gt18Array = state.array.filter((e, i) => {
return e.age > 18;
});
return gt18Array;
}
}
});
getter 接收的第一个参数是state, 这样我们就能拿到state中定义的变量.
getter只是对变量进行筛选, 过滤等不改变变量本值的操作.如过滤数组, 获得数组,字符串的长度等.不要在getter中改变state中变量的值, 虽然可以, 但这不是getter该做的. 是mutations要做的.
getter 接收的第二个参数为其他的getter的集合, 这样就可以拿到其他getter计算后的结果.
增加一个getter, 返回gt18过滤后结果数组的长度.
getters:{
gt18 : (state) => {
let gt18Array = state.array.filter((e, i) => {
return e.age > 18;
});
return gt18Array;
},
gt18Length: (state, getters) => {
return getters.gt18.length;
}
}
然后 : 组件中调用定义的getter.
getter调用方式一:通过属性访问, 直接映射到计算属性中, 通过this.$store.getters.gt18即可获得过滤后的数组.
computed:{
gt18(){
return this.$store.getters.gt18;
},
gt18length(){
return this.$store.getters.gt18Length;
}
}
在页面上使用gt18完成数据渲染过滤后的数组. gt18length得到过滤后的数组长度.
getter调用方式二:通过方法访问, 有时不仅仅是数组的过滤, 更多的时候是对数据进行指定方式的查询, 如对于上述数组, 返回name为lis的数据的age. 而且name根据具体情境有所不同, 这就需要给getter传参. 要给getter传参, 让 getter 返回一个函数即可.
定义根据姓名查询年龄的getter.
getters:{
// 根据传入的name查询数据, 数据存在, 返回数据中的namegetSomeoneAge(state){
return (name) => {
let oneData = state.array.find((ele) => {
return ele.name == name;
});
let age = oneData ? oneData.age : "查无此人"
return age;
}
}
}
在组件内定义name变量, 并绑定到input输入框内, 在computed中调用getSomeoneAge, 并传入参数.
data () {
return {
name:"wangw"
}
},
computed:{
personName(){
return this.$store.getters.getSomeoneAge(this.name);
}
}
页面输入框绑定name, span显示查询结果
根据姓名查询年龄
请输入姓名
年龄 : {{personName}}
效果:
最后 : 同state一样, getter也有一个辅助函数mapGetters.
第一步: 引入辅助函数
import { mapGetters } from 'vuex'
第二部: 在计算属性中使用.
传入数组: 即将store中的gt18MapGetters返回的结果, 映射到组件内的gt18MapGetters变量上.
在组件内即可使用gt18MapGetters, 它就是getter gt18MapGetters 的返回结果.
传入对象起别名: gt18MapGetters映射到组件内是的aliasName变量上.
computed:{
count(){
return this.$store.state.count;
},
ageArray(){
return this.filterAgeGt18(this.$store.state.array);
},
ageArrayUseUtilFunFilter(){
return filterAgeGt18(this.$store.state.array);
},
ageArrayUseVueProtoFilter(){
return this.f18(this.$store.state.array);
},
gt18(){
return this.$store.getters.gt18;
},
gt18length(){
return this.$store.getters.gt18Length;
},
personName(){
return this.$store.getters.getSomeoneAge(this.name);
},
...mapGetters(["gt18MapGetters"]),
...mapGetters({"aliasName":"gt18MapGetters"})
}
getter的使用就到这里, 这一阶段的代码在getter分支上, 可下载验证上述功能:
未完.... 还有 Mutation Action Module.
扫一扫
2288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
