<template>
<div>
<h3>Menu2.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 {
// state 변수(현재 컴포넌트에 필요한 변수)
data() {
return {
items: [],
store: useStore(),
page: 1,
}
},
created() {
this.handleData();
},
mounted() {
// 모든 컴포넌트에서 값을 변경한 것을 통보 받기
// this.store.subscribe((mutation, state) => {
// console.log(mutation, state);
// // items의 변수에 값을 넣어야 함
// if(mutation.type === 'setItems') {
// this.items = mutation.payload;
// }
// });
},
methods: {
currentChange(page) {
console.log('Board1.vue => currentChange', page);
this.page = page;
this.handleData();
},
// 백엔드에서 필요한 데이터를 받아서 items에 넣음
async handleData() {
// action에 정의되어 있는 handleData 호출
await this.store.dispatch('handleData', {page:this.page});
// store mutation 호출(공통의 값 변경하는 역할-동기방식)
// this.store.commit('setCounter', 30);
// store의 getters 호출(공통의 값 가져오는 역할)
this.items = this.store.getters.getItems;
},
rowClick(row) {
console.log('Board1.vue => rowClick', row);
this.$router.push({
name: 'BoardOne',
query: {bno: 2, no : row.no}
});
}
}
}
</script>
<style scoped>
</style>