После того как
Aetae на мекнул на JS. Я вспомнил про событие, с помощь их отловил событие клика и с кнопками пагинации это работало. Но мне нужно было отслеживать событие в других компонентах. Не знаю правильно ли я сделал, но я обратился к VUEX. Сейчас код выглядит так
/store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
page: 1,
maxpage: 1,
newmenu: false,
portfolio: [],
},
mutations: {
INCREMENT_PAGE(state, payload) {
state.page = payload;
console.log(state.page);
},
INCREMENT_PORTFOLIO(state, payload) {
state.portfolio = payload;
console.log(state.portfolio);
},
INCREMENT_MAXPAGE(state, payload) {
state.maxpage = payload;
console.log(state.maxpage);
},
}
})
export default store;
/src/views/PortfolioViem.vue
<template>
<section class="portfolio_section bg0 bg1 ">
<div class="portfolio_page">
<div class="portfolio_items">
<PortFolioList :page='this.$store.state.page' />
</div>
<div class="portfolio_seadbar">
</div>
</div>
{{ my }}
<Pagination :max_num_pages='portfolio.max_num_pages' :pages='this.$store.state.page' />
</section>
</template>
<script>
function pereborpage(no) {
var hop = 0;
if (no == 0 || no == null) {
hop = 1;
} else {
hop = no;
}
return hop;
}
import HeiderPortfoli from '@/components/HeiderPortfoli.vue';
import PortFolioList from '@/components/PortfolioList.vue';
import Pagination from '@/components/Pagination.vue';
export default {
name: 'ServicesV',
components: {
HeiderPortfoli,
PortFolioList,
Pagination
},
data() {
return {
portfolio: [],
my: [],
cms: [],
n: 0,
page: 1,
};
},
async mounted() {
console.log(this.$store.state.page)
const lrt = this.$route.params.page;
const ThisPage = pereborpage(lrt);
this.$store.commit('INCREMENT_PAGE', ThisPage);
console.log(this.$route);
console.log(lrt);
console.log(ThisPage);
this.page = ThisPage;
const my_servecj = await fetch('API/my_servec/');
const cms_servesj = await fetch('API/cms_serves/');
const my_servecq = await my_servecj.json();
const cms_servesq = await cms_servesj.json();
this.my = my_servecq;
this.cms = cms_servesq;
}
}
</script>
/src/components/Pagination.vue
<template>
<div v-if="this.$store.state.maxpage != 0 || this.$store.state.maxpage != null">
<ul class="pagination">
<template v-for="n in this.$store.state.maxpage" :key="n">
<template v-if="n == page">
<span class="active">{{ n }}</span>
</template>
<template v-else>
<router-link @:click="perexod(n)" :to="{ name: 'portfolio', params: { page: n } }">{{ n }}</router-link>
</template>
</template>
</ul>
</div>
</template>
<script >
export default {
name: 'PaginationV',
data() {
return {
n: 0,
page: 1,
portfolioj: [],
}
},
props: {
max_num_pages: Number,
pages: Number,
},
methods: {
async perexod(pag) {
//console.log(pag);
this.page = pag;
this.$store.commit('INCREMENT_PAGE', pag);
const portfolioj = await fetch(`api/?page=${this.$store.state.page}`);
const portfolioq = await portfolioj.json();
this.$store.commit('INCREMENT_PORTFOLIO', portfolioq.post);
this.$store.commit('INCREMENT_MAXPAGE', portfolioq.max_num_pages);
//console.log(this.page);
console.log(this.$store.state.page);
}
},
}
</script>
<style scoped>
/src/components/PortfolioList.vue
<template>
<template v-for="item in this.$store.state.portfolio " :key="item.ID">
<CardPortfolio :url="item.post_name" :img="item.img" :title="item.post_title" :content="item.post_content"
:color="item.color" />
</template>
</template>
<script>
import CardPortfolio from '@/components/CardPortfolio.vue';
export default {
name: 'PortFolioList',
props: {
type: Number,
page: Number,
},
components: {
CardPortfolio
},
data() {
return {
portfolio: [],
};
},
async mounted() {
const portfolioj = await fetch(`api/?page=${this.$store.state.page}`);
const portfolioq = await portfolioj.json();
this.$store.commit('INCREMENT_PORTFOLIO', portfolioq.post);
this.$store.commit('INCREMENT_MAXPAGE', portfolioq.max_num_pages);
console.log(portfolioq);
this.portfolio = portfolioq;
}
}
</script>
<style scoped></style>
Все работает, при нажатии выбора страницы. Список обновляется, без самой перезагрузки страницы. Однако мне интересно мнение профи, все ли я сделал правильно ? и можно было как-то по другому? может есть моменты которые можно улучшить ?
Средний
