getters相当于一个计算属性,在我们从state取数据时,对数据进行一些计算或者过滤等操作
state: {
counter: 1000,
students: [
{ id: 0, name: "c", age: 21, a: true },
{ id: 0, name: "c", age: 18, a: true },
{ id: 0, name: "c", age: 17, a: false },
{ id: 0, name: "c", age: 20, a: false },
{ id: 0, name: "c", age: 21, a: true },
],
arr: ["a", "a", "b", "b", "c", "c", "c"],
}
getters: {
powerCounter(state) {
return state.counter * state.counter;
},
checkStudent(state) {
return state.students
.filter(
(item) => item.a && item.age <= 20)
.reduce((pre, val) => {
return pre + val.age;
}, 0);
},
studentsNum(state) {
return state.students.filter((item) => item.age <= 20).length;
},
//消除数组中重复项 indexOf(item)返回该元素第一次出现的位置,与index比较,相等则返回为一个数组
removeNum(state) {
return state.arr.filter((item, index, self) => {
return self.indexOf(item) === index;
});
},
removeNumLength(state, getters) {
return getters.removeNum.length;
},
show(state) {
return state.students.filter(
(item) => state.age && item.age > state.age && item.a
);
},
// 调用getters传递参数时
length(state) {
return (age) => {
return state.students.filter((item) => item.age > age && item.a);
};
},
},
写好getter中的方法可以使用mapGetters进行使用
<h2>getters</h2>
<h2>{{ powerCounter }}</h2>
import { mapGetters } from "vuex";
computed: {
...mapGetters(["powerCounter",]),
},
vue文件使用...mapGetters方法相当于
computed:{
powerCounter(){
return this.$store.state.counter * this.$store.state.counter
}
}