Vuex之getters的使用方法

什么是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

以上如有问题，请指出。