什么是getters?
getters其实就是store的计算属性,对state里面的状态进行过滤处理,用法与组件自身的计算属性一模一样。
怎么使用getters?
在store文件夹下的index.js中:
//index.js
import Vuex from 'vuex'
import Vue from 'vue'
//1.安装插件
Vue.use(Vuex)
const state = {
count: 10,
students: [
{id: 1, name: 'zhangsan', age: 18},
{id: 2, name: 'lisi', age: 20},
{id: 3, name: 'xiaohua', age: 15},
{id: 4, name: 'jinjin', age: 22}
]
}
const mutations = {}
const getters = {
//求count的平方
powerCount(state){
return state.count * state.count
},
//拿到age大于20的学生
more20stu(state){
return state.students.filter(s => s.age > 20)
},
//拿到age大于20的学生的个数
more20stuLen(state, getters){
return getters.more20stu.length
},
//拿到age大于用户传进来的age值的学生
moreAgestu(state, getters){
return function (age){
return state.students.filter(s => s.age > age)
}
}
}
//2.创建对象
const store = new Vuex.Store({
state,
mutations,
getters
})
export default store;
show.vue
<template>
<div>
<!-- 这里方便查看 -->
<h2>{{$store.state.username}}</h2>
<h2>count的平方==={{$store.getters.powerCount}}</h2>
<h2>学生年龄大于20==={{$store.getters.more20stu}}</h2>
<h2>学生年龄大于20的个数==={{$store.getters.more20stuLen}}</h2>
<h2>学生年龄大于age的个数==={{ $store.getters.moreAgestu(18) }}</h2>
</div>
</template>
<script>
export default {}
</script>
也可以这样使用:
<template>
<div>
<!-- 这里方便查看 -->
<h2>count的平方==={{ power }}</h2>
<h2>学生年龄大于20==={{ more20 }}</h2>
<h2>学生年龄大于20的个数==={{ num }}</h2>
</div>
</template>
<script>
export default {
computed: {
power() {
return this.$store.getters.powerCount;
},
more20(){
return this.$store.getters.more20stu;
},
num(){
return this.$store.getters.more20stuLen
}
}
};
</script>
效果如下:
模块化写法:
新建state.js保存所有的状态:
export default {
username: "", //用户名
token: "", //用户令牌
role: "", //用户角色
count: 0,
students: [
{ id: 1, name: "zhangsan", age: 18 },
{ id: 2, name: "lisi", age: 20 },
{ id: 3, name: "xiaohua", age: 15 },
{ id: 4, name: "jinjin", age: 22 }
]
};
新建getters.js对state进行一系列操作:
//求count的平方
export function getCount (state){
return state.count * state.count
}
//拿到age大于20的学生
export function more20stu(state){
return state.students.filter(s => s.age > 20)
}
//拿到age大于20的学生的个数 第二个参数可以访问getters
export function more20stuLen(state, getters){
return getters.more20stu.length
}
//拿到age大于用户传进来的age值的学生 如果要传参,可以return一个函数
export function moreAgestu(state, getters){
return function (age){
return state.students.filter(s => s.age > age)
}
}
在store文件夹的index.js中引入模块:
import Vuex from 'vuex'
import Vue from 'vue'
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
//1.安装插件
Vue.use(Vuex)
//2.创建对象
const store = new Vuex.Store({
state,
mutations,
getters
})
export default store;
这样写是为了方便以后有更多的操作,更便于维护。
mapGetters辅助函数
mapGetters工具函数就是将store中的getters映射到局部计算属性当中
show.vue:
<template>
<div>
<h2>count的平方==={{ getCount }}</h2>
<h2>学生年龄大于20==={{ more20stu }}</h2>
<h2>学生年龄大于20的个数==={{ more20stuLen }}</h2>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['getCount','more20stu','more20stuLen']),//把要使用的getters放在数组里面
}
};
</script>
这样使用起来更方便,放在计算属性当中是因为方便响应式。
我认为写得比较好的(当然有很多写得好的,这里只贴一两个):
https://blog.csdn.net/dkr380205984/article/details/82220250
https://blog.csdn.net/dkr380205984/article/details/82185740
https://blog.csdn.net/gao_xu_520/article/details/79694148
以上如有问题,请指出。