Vue学习第23天 —— Vuex中getters详细讲解及使用案例，与computed计算属性对比

前言

这篇文章表示已经掌握vuex的相关知识，如不了解，点击：Vuex安装使用详解及案例练习（彻底搞懂vuex）
文章看完可以看4个map方法，点击：Vuex中的4个map方法的基本用法及案例练习

一、getters相关知识

1、作用

当state中的数据需要经过加工之后再使用，我们可以使用getter来加工

2、理解

在项目中，getter是为简化数据而生

二、配置getters

1、在store/index.js文件中追加getters配置

...
const getters = {
	//bigSum为自定义名称
    bigSum(state) {
        return state.sum * 10
    }
}

//向外暴露
export default new Vuex.Store({
	...
    getters
})

2.组件中读取数据

$store.getters.bigSum

三、getters案例练习

需求：将state中的数据放大十倍在页面中显示

1、index.js中代码

//引入vue
import Vue from "vue";

//引入vuex库
import Vuex from "vuex";

// 使用vuex
Vue.use(Vuex)

//actions用于响应组件中用户的动作
const actions = {
    //数据需要业务逻辑判断
    odd(context,num){
        if(context.state.sum % 2 != 0) {
            context.commit("ODD",num)
        }
    }
};

//mutations用于修改state中的数据
const mutations = {
    ADD(state,num){
        state.sum +=num;
    },
    ODD(state,num){
        state.sum +=num;
    }
};

//state保存sum数据
const state = {
    sum:0,
};

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//store管理以上三个对象，并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

2、count组件代码

<template>
  <div>
    <h3>当前求和为：{{$store.state.sum}}</h3>
    <select @click="selectNum($event)">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="addNum">+</button>
    <button @click="oddNum">sum为奇数再加</button>
    <h3>将sum放大十倍后的和为：{{$store.getters.bigSum}}</h3>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  methods:{
    selectNum(){
      this.num = Number(event.target.value)
    },
    addNum(){
      this.$store.commit("ADD",this.num)
    },
    oddNum(){
      this.$store.dispatch("odd",this.num)
    }
  }
}
</script>

<style>
button {
  margin-left: 5px;
}
</style>

3、运行结果

4、案例总结

1、getters得到的数据是在vuex中的getters中（我们可以看到在开发者工具中）

2、getters中的函数必须有返回值

3、控制台输出getters如图

四、以上案例通过computed计算属性实现

1、index.js代码

//引入vue
import Vue from "vue";

//引入vuex库
import Vuex from "vuex";

// 使用vuex
Vue.use(Vuex)

//actions用于响应组件中用户的动作
const actions = {
    //数据需要业务逻辑判断
    odd(context,num){
        if(context.state.sum % 2 != 0) {
            context.commit("ODD",num)
        }
    }
};

//mutations用于修改state中的数据
const mutations = {
    ADD(state,num){
        state.sum +=num;
    },
    ODD(state,num){
        state.sum +=num;
    }
};

//state保存sum数据
const state = {
    sum:0,
};

//store管理以上三个对象，并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

2、count组件代码

<template>
  <div>
    <h3>当前求和为：{{$store.state.sum}}</h3>
    <select @click="selectNum($event)">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="addNum">+</button>
    <button @click="oddNum">sum为奇数再加</button>
    <h3>将sum放大十倍后的和为：{{bigSum}}</h3>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  methods:{
    selectNum(){
      this.num = Number(event.target.value)
    },
    addNum(){
      this.$store.commit("ADD",this.num)
    },
    oddNum(){
      this.$store.dispatch("odd",this.num)
    }
  },
  computed: {
    bigSum() {
      return this.$store.state.sum *10
    }
  }
}
</script>

<style>
button {
  margin-left: 5px;
}
</style>

两者实现效果相同

五、getters与computed区别

通过以上案例，我们可以发现vuex中的getters能实现的，通过computed配置项也能实现，那么getters存在的意义是？

比如一个过滤后的求和数据filterSum，如果很多组件都要使用filterSum这个数据，那么比起在需要用到的组件中一遍遍computed，我们为何不把这个数据抽离出来共享呢？

这是vuex中getters存在的意义，我们也可以理解为getters是store的计算属性

六、进阶学习

getter会暴露为$stoer.getters对象，其实我们有两种方法获取这些值

1、通过属性获取

上面案例是通过属性获取的：$store.getters.bigSum
getter函数可以接收两个参数，第一个参数是state，第二个参数可以是其他getter

getters: {
  // ...
  bigSum(state, getters) {
    return getters.value*10
  }
}

2、通过方法获取

可以通过让 getter 返回一个函数，来实现给 getter 传参
使用场景：对store中的数据进行查询时非常有用

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.sum.find(todo => todo.id === id)
  }
}

组件中使用：store.getters.getTodoById(5)

3、两者区别

① getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的
② getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果