日拱一卒-vuex的使用（二）

前文讲到，当我们在store.js中创建了我们的state值的时候，我们可以在组件的computed属性中进行获取后返回。
然而，当我们要获取多个量的时候，这种写法非常繁琐，如下：

computed: {
    value1(){
        return this.$store.state.value1;
    },
    value2(){
        return this.$store.state.value2;
    },
    ...
}

好在，vuex早就为我们考虑到了这种场景。
在vuex中，官方提供了几个map辅助函数。
map，跟我们数组的map方法一样，起一个遍历的作用。
想要对state值进行map操作，那我们就用mapState辅助函数。
这个辅助函数的使用，需要先从vuex中引入：

import { mapState } from 'vuex'

之后就可以把上面那种繁琐的写法改写成如下样子：

computed: mapState({
    value1: state => state.value1,
    value2: 'value2'
  })

当然，这种写法局限于我们所有的computed属性都是vuex中的值，正常来讲我们computed中的值还有从data或props中取到的值，所以应该把mapState混入到computed中，写法如下：

computed: {
  localValue () {
    return this.value;
  },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    value1: state => state.value1,
    value2: 'value2'
  })
}

这里用的是一个对象展开运算符。因为mapState返回的是一个对象，而computed的值也是一个对象，所以我们可以把mapState的值赋给computed。但是当要混入的时候，就需要先使用展开运算符把对象展开，再和其他的key-value混在一起，包装成另外一个对象，再赋值给computed。
当然，这不是vuex本身的内容，而是ES6的展开运算符。