vuex中mapGetters的使用及简单实现原理

一、mapGetters简介

在Vue项目的开发过程必然会用到vuex，对vue项目公用数据进行管理，从而解决组件之间数据相互通信的问题，从而简化了非父子组件之间的数据通信。

二、在项目中mapGetters的使用

　　1. store部分的目录结构

　　　　　　

　　2. index.js

　　　　　　

 

 

 　　3. setting.js

　　　　

 

 

 　　4. getters.js

　　　　

 

 

 　　5. 在vue组件中

　　　　

 

 

 

 通过引入mapGetters，就可以轻松的取到vuex中存储的数据，从代码中可以看出，getters就类似于vue组件中的computed(计算属性)，在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中。

　　在组件不多，组件的数据通信不是很多时，会变得复杂化。

　　在复杂的项目中会极大的减少工作量，及组件之间数据传递的复杂程度。

三、Getters简单实现原理

　　在组件中

import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      //...fn(['a', 'b', 'c'])      //需要实现这样一个方法传入一个数组
    },
    methods: {
      menuClick (key) {
        if (key === 0) {
          this.$router.push('/ebook')
        }else if (key === 1) {
          this.$router.push('/datachart')
        }else{
          return
        }
        
      }
    },
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
      // console.log(this.a,this.b,this.c)  // 在组件中可以直接通过this取到相应的值
    }
  }

我们在计算属性中添加
…fn([‘a’, ‘b’])

要求在组件中可以直接通过
this.a 和this.b 取到相应的值

const getters = {
    a: () => 1,
    b: () => 2,
    c: () => 3
  }
  function fn (keys) {
    const data = {}
    keys.forEach(key => {
      if (getters.hasOwnProperty(key)) {
        data[key] = getters[key]
      }
    });
    return data
  }
  
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      ...fn(['a', 'b', 'c'])
    },
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
      console.log(this.a,this.b,this.c)
    }
  }

打印结果为1，2，3
方法getters就类似于vuex中getters，
方法fn与vuex中的mapGetters有着相似的功能，其实在vuex的底层中也是使用这样类似的原理

注：（...）是es6新增语法展开运算符，大体有两个主要功能，收集参数与将数组表达式或者string在语法层面 展开。