<template lang="html">
  <div>
    count: {{ count }}
    countPlusLocalState: {{countPlusLocalState}}
  </div>
</template>

<script>
import {
    mapState
} from 'vuex'

export default {
    data() {
        return {
          localCount: 10
        }
    },
    computed: mapState({
      // 箭头函数可以让代码非常简洁
      count: state => state.count,
      // 传入字符串 'count' 等同于 `state => state.count`
      countAlias: 'count',
      // 想访问局部状态，就必须借助于一个普通函数，函数中使用 `this` 获取局部状态
      countPlusLocalState (state) {
        return state.count + this.localCount
      }
    }),
    mounted() {},
    methods: {},
    components: {}
}
</script>

<style lang="css">
</style>