text: <template>
    <div class="demo">
      <button @click="increment">count +1</button>
      <button @click="decrement">count -1</button>
      <button @click="resetCount">重置</button>
      <p>Count is : {{count}}</p>
      <p>count延迟了1秒赋值</p>
      <p>ajax接口返回{{testResult}}</p>
    </div>
  </template>
  <script type="text/babel">
    import { mapGetters, mapActions } from 'vuex'
  
    export default {
      title: 'Vuex store数据处理',
      asyncData({ store, router }) {
        // 触发 action 后，会返回 Promise
        return store.dispatch('loading')
      },
      computed: {
        ...mapGetters({
          count: 'getCount',
          testResult: 'getTestResult'
        })
      },
      methods: {
        ...mapActions([
          'increment',
          'decrement',
          'resetCount'
        ])
      }
    }
  </script>
  <style lang="stylus" scoped>
    .demo {
      padding: 20px;
      font-size: 14px;
      text-align: center;
    }
  </style>