SOURCE

<div id="app">
	<!-- 调用组件 -->
	<my-com></my-com>
</div>

<template id="myCom">
  <div>
    <button @click="decrement">-</button>
    {{count}}
    {{dataCount}}
    <button @click="increment">+</button>
  </div>
</template>

<script>
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 1,
    name: 'heheda',
    sex: 'man',
    from: 'china'
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

// 全局注册创建的myCom组件
Vue.component('myCom', {
	template: '#myCom',
    store: store,
    data () {
      console.log(store.state.count)
      // 用data接收
      return {
        dataCount: this.$store.state.count
      }
    },
    // computed:{
    //   // 用computed接收
    //   count() {
    //     return this.$store.state.count
    //   }
    // },
    computed: Vuex.mapState({
        count: state => state.count
    }),
    methods: {
      increment () {
        this.$store.commit('increment');
        console.log(this.$store.state.count)
      },
      decrement () {
        this.$store.commit('decrement');
      }
    }
});

var app = new Vue({
	el: '#app'
});
</script>