<template>
<div>
<h3>Menu1.vue</h3>
<el-table :data="items" style="width: 100%;cursor:pointer;" size="mini" @row-click="rowClick">
<el-table-column prop="no" label="글번호" width="80" />
<el-table-column prop="title" label="제목" width="180" />
<el-table-column prop="writer" label="작성자" width="120" />
<el-table-column prop="hit" label="조회수" width="80" />
<el-table-column prop="regdate" label="날짜" />
</el-table>
<el-pagination layout="prev, pager, next" :total="200" @current-change="currentChange"></el-pagination>
</div>
</template>
<script>
import {useStore} from 'vuex';
export default {
data() {
return {
items: [],
page: 1,
store: useStore(),
}
},
created() {
this.handleData();
},
mounted() {
this.store.subscribe((mutation, state) => {
console.log(mutation, state);
if(mutation.type === 'setItems') {
this.items = mutation.payload;
}
});
},
methods: {
handleData() {
this.store.dispatch('handleData', {page:this.page});
this.items = this.store.getters.getItems;
},
currentChange(page) {
console.log('Board1.vue => currentChange', page);
this.page = page;
this.handleData();
},
rowClick(row) {
console.log('Board1.vue => rowClick', row);
this.$router.push({
name: 'BoardOne',
query: {bno: 1, no : row.no}
});
}
}
}
</script>
<style scoped>
</style>