How to pass a post from one component to another?

Question

Vue.js

I'm new to Vue and want to make a block that will display the last 5 posts I've visited. I have a Pagination component that contains posts. When I click on a post, I go to a page with a detailed description of this post. How to make it so that in parallel with the transition this post is also added to another History component and so on the next time I click on some other post. All this I would like to do with the event bus.
Code of component History:

<template>
  <ul>
    <li v-for="(post, index) in historyPosts" class="post" :key="index">
        <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
        <img src="src/assets/nature.jpg">
        <p class="boldText"> {{ post.title }}</p>
        </router-link>
      <p> {{ post.body }}</p>
    </li>
  </ul>
</template>

<script>
  import {eventEmitter} from './main'

  export default{
    data(){
      return{
        historyPosts: []
      }
    },
      created(){
        eventEmitter.$on('historyPost', (hPost) => {
          historyPosts: hPost
        })
    }
  }
</script>

<style>

</style>

Code of component with posts:

<template>
  <div class = "app">
    <ul>
      <li v-for="(post, index) in paginatedData" class="post" :key="index">
        <div @click="postInHistory">
          <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
          <img src="src/assets/nature.jpg">
          <p class="boldText"> {{ post.title }}</p>
          </router-link>
        <p> {{ post.body }}</p>
        </div>
      </li>
      </ul>
        <div class="allpagination">
          <button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
          <div class="pagin">
            <button class="item"
            v-for="n in evenPosts"
            :key="n.id"
            v-bind:class="{'selected': current === n.id}"
            @click="page=n-1">{{ n }} </button>
          </div>
          <button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
        </div>
      </div>
    </template>

    <script>
      import axios from 'axios';
      import {eventEmitter} from './main'
      export default {
        name: 'app',
        data () {
          return {
            current: null,
            page: 0,
            visiblePostID: '',
            pSearch: '',
            posts: []
          }
        },
        computed: {
          evenPosts: function(posts){
            return Math.ceil(this.posts.length/6);
          },

          paginatedData() {
            const start = this.page * 6;
            const end = start + 6;
            return this.filteredPosts.slice(start, end);
          },
          filteredPosts() {
            return this.posts.filter((post) => {
              return post.title.match(this.pSearch);
            });
          },
        },
        methods: {
          getData() {
            axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
              this.posts = response.data
            })
          },
          postInHistory(){
            const hPost = {
            title: this.post.title,
            body: this.post.body
          }
            eventEmitter.$emit('historyPost', hPost)
          },
        },
        created(){
          eventEmitter.$on('messageSave', (string) => {
            this.pSearch = string
          }),
          eventEmitter.$on('postAdd', (post) => {
            axios.post('http://jsonplaceholder.typicode.com/posts/', {
              title: post.title,
              body: post.body
            }).then((response) => {
              this.posts.unshift(response.data)
            })
          }),
          this.getData()
        }
      }
    </script>

Answer 1

Use Vuex