跟着文档学Vuex（二）：状态读取

Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态，那么如何获取状态呢，最简单的方法就是在“计算属性”中返回某个状态

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

每当store.state.count变化时，都会重新请求计算属性，并且出发相关dom更新。
下面是子组件中的用法，在根实例中注册store

Vue.use(Vuex)
new Vue({
  store
})

下面在每个子组件中，使用this.$store.state.count就可以访问到

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

是不是很简单

mapState 辅助函数

当你的一个组件需要获取多个状态时，一个一个声明计算属性会有些重复和冗余，使用mapState，就会帮助我们自动生成，节省很多时间

import { mapState } from 'vuex'

export default {
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

//当计算属性名称和state子节点名称相同时，我们可以传一个字符串数组
computed: mapState([
  'count1','count2'
])

//一般computed里还有其他计算属性，这是我们要混合使用的话，可以使用对象展开运算符
computed: {
  localComputed () {....},
  ...mapState({  //或者这里改为数组
     countAlias: 'count'
  })
}

以上就是Vuex中 state数据的读取方法，通过this.store.state[key]获取我们想要的参数，同时在computed里返回就可以得到啦，同时还有一个mapState供我们在需要获取很多数据的时候使用，下一节，我们将介绍getter的用法~

引用

https://vuex.vuejs.org Vuex官方文档