Я новичок в Vue и хочу сделать блок в котором будут отображаться последние 5 постов которые я посетил. У меня есть компонент Pagination в котором и находятся посты. При нажатии на какой-то пост я перехожу на страницу с детальным описанием этого поста. Как сделать так чтобы паралельно переходу этот пост еще добавлялся в другой компонент History и так само в следующий раз когда я нажму на какой-то другой пост. Всё это я хотел бы сделать с помощью шины событий.
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>
Простой
