（VUEX）mapState辅助函数

在vue组件中我相信大家都是知道如何简单的获取到Vuex的状态并且展示它。

第一种方式：
因为Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法是读取计算属性

computed: {
  count () {
    return store.state.count
  }
},

每当 store.state.count变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
但这种方法有个缺点就是：依赖全局状态单例，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。

第二种方式：通过store选项，提供一种机制将状态从根组件"注入"到每个子组件中，这个就需要用Vue.use(Vuex)，然后在各个需要用state的组件中通过this.$store 访问到：

computed: {
  count () {
    return this.$store.state.count
  }
},

第三种方式：mapState辅助函数重点

有时候可以能会遇到一个组件里会用到多个state的状态，如果还是用上面的声明计算属性的方式就会有些重复和冗余了，为了解决这个问题VUEX也提供了mapState辅助函数帮助我们生成计算属性，让你少写重复代码：
首先一点在需要的组件里引入vuex，并且是指定"mapState "

import { mapState } from 'vuex'
computed:{
 ...mapState(['count','name'])
},

...mapStatey一定也是写在computed里才有效大家千万要记住了

下面列出对比前面的方式：

computed: {
  count () {
    return this.$store.state.count
  },
  name () {
    return this.$store.state.name
  }
},

computed:{
  ...mapState(['count','name'])
},