board/Menu1.vue_20211227

<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 {
        // state 변수(현재 컴포넌트에 필요한 변수)
        data() {
            return {
                items: [],
                page: 1,
                store: useStore(),
            }
        },

        created() {
            this.handleData();
        },

        mounted() {
            // 모든 컴포넌트에서 값을 변경한 것을 통보 받기
            this.store.subscribe((mutation, state) => {
                console.log(mutation, state);
                // items의 변수에 값을 넣어야 함
                if(mutation.type === 'setItems') {
                    this.items = mutation.payload;
                }
            });
        },

        methods: {
            // 백엔드에서 필요한 데이터를 받아서 items에 넣음
            handleData() {
                    // action에 정의되어 있는 handleData 호출
                    this.store.dispatch('handleData', {page:this.page});

                    // store mutation 호출(공통의 값 변경하는 역할-동기방식)
                    // this.store.commit('setCounter', 30);

                    // store의 getters 호출(공통의 값 가져오는 역할)
                    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} // bno = 게시판 구분
                });
            }
        }
    }
    
</script>

<style scoped>

</style>