Vuex中State的使用方法

// 根组件
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，
  // 这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

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

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

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

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

    // 若想使用组件内 data 中定义的局部变量，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

// 映射 this.count 为 store.state.count
// 使用时，按照计算属性使用即可 this.count
computed: mapState(['count'])

// 使用按照计算属性用法  直接 this.count ,this.num
// 插值表达式 {{ count }}, {{ num }}
computed: {
  ...mapState(['count', 'num'])
}