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

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            localCount: 10
        }
    },
    computed: {
        localComputed() {
            return 'localComputed'
        },
        ...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>