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
    }
}