这是一篇关于vuex的学习笔记 -- Getter

Y0n9

人活着本来是没有意义的

State 这是一篇关于vuex的学习笔记 -- State

接上一篇, 这篇介绍Getter的使用.

点击进入最终项目github下载地址点击进入github上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查询数据, 数据存在, 返回数据中的name
	getSomeoneAge(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显示查询结果

<div class="queryAge">
    <h3>根据姓名查询年龄</h3>
        <span>请输入姓名</span>
        <input type="text" placeholder="请输入姓名" v-model="name">
        <span> 年龄 : {{personName}}</span>
    </div>
</div>

效果:

最后 : 同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(){