Counter.vue 742 B

123456789101112131415161718192021222324252627
  1. <template>
  2. <div>
  3. Clicked: {{ count }} times
  4. <button @click="increment">+</button>
  5. <button @click="decrement">-</button>
  6. <button @click="incrementIfOdd">Increment if odd</button>
  7. <button @click="incrementAsync">Increment async</button>
  8. </div>
  9. </template>
  10. <script>
  11. import vuex from './vuex'
  12. export default {
  13. data () {
  14. return {
  15. // this is how we connect the component's state to
  16. // a part of vuex's state tree. `vuex.get()` returns
  17. // a Cursor, which is essentially an event emitter that
  18. // lets you subscribe to value changes. When Vuex is used,
  19. // Vue instances knows how to handle Cursors inside data.
  20. count: vuex.get('count')
  21. }
  22. },
  23. methods: vuex.actions
  24. }
  25. </script>