Posts.vue 846 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <section v-if="opened != null">
  3. <h2>{{ opened.title }}</h2>
  4. <p>{{ opened.body }}</p>
  5. <a
  6. href="#"
  7. @click="closePost()"
  8. @keydown.enter="openPost(post)"
  9. >
  10. close</a>
  11. </section>
  12. <ul v-else>
  13. <li
  14. v-for="post in posts"
  15. :key="post.id"
  16. >
  17. <h2>
  18. <a
  19. :href="'#post-'+post.id"
  20. @click="openPost(post)"
  21. @keydown.enter="openPost(post)"
  22. >
  23. {{ post.title }}</a></h2>
  24. </li>
  25. </ul>
  26. </template>
  27. <script>
  28. import { mapState, mapActions } from 'vuex'
  29. export default {
  30. computed: mapState({
  31. opened: state => state.posts.opened,
  32. posts: state => state.posts.all
  33. }),
  34. methods: mapActions('posts', [
  35. 'openPost',
  36. 'closePost'
  37. ]),
  38. created () {
  39. this.$store.dispatch('posts/getAllPosts')
  40. }
  41. }
  42. </script>