20211224

CMD> npm i vuex@next --save

//파일명 : src/stores/index.js
// CMD> npm i vuex@next --save
import {createStore} from 'vuex'

export default createStore({

// 상태변수(전역변수)
// 어떤 컴포넌트에서 바꿀수 있는 변수
state : {
    counter : 20,
    menu    : 'home',
},

// 결과 값을 가지고 가는 메소드
getters : {
    getMenu(state) {
        return state.menu;
    },

    getCounter(state) { // 그대로 값
        return state.counter;
    },

    getCounter1: state => { // 가공된 값
        return state.counter * 2;
    }
},

// 결과 값을 바꾸는 것(동기)
mutations : {
    setMenu : (state, value) => {
        state.menu = value;
    },

    setCounter : (state, value) => {
        state.counter = value;
    },

    setCounter1 (state, value) {
        state.counter = value + 100;
    }
},

// 결과 값을 바꾸는 것(비동기)
actions : {
    actionCounter(context, payload){
        const value = payload.counter;
        //위에 생성되어 있는 setConter을 호출함.
        context.commit('setCounter', value);
        
        //context.getters 나 context.state에 접근
    }
}

});

// 파일명 : src/main.js

// App.vue가 시작파일
import { createApp } from 'vue';
import App from './App.vue';

// UI Framework
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

// axios restful 호출
import axios from 'axios';

// routes 설정파일 위치 가져오기
import routes from './routes/index.js';

// stores 설정파일 위치 가져오기
import stores from './stores/index.js';

const app = createApp(App);

// 이 위치가 설정파일들의 적용
app.use( routes);
app.use( stores);
app.use( ElementPlus);
app.config.globalProperties.axios = axios;

app.mount('#app');

// 파일명 : App.vue

<el-container>
  <el-header>
    <el-menu class="el-menu-demo" mode="horizontal" :router="true">
      <el-menu-item index="home" ref="home">홈</el-menu-item>
      <el-menu-item index="login" ref="login" v-show="!logged">로그인</el-menu-item>
      <el-menu-item index="logout" ref="logout" v-show="logged">로그아웃</el-menu-item>
      <el-menu-item index="mypage" ref="mypage" v-show="logged">마이페이지</el-menu-item>
      <el-menu-item index="join" ref="join">회원가입</el-menu-item>
      <el-menu-item index="admin" ref="admin">관리자</el-menu-item>
    </el-menu>
  </el-header>
  <!-- v-if= 태그를 생성시키지 않음  -->
  <!-- v-show= 태그 생성, 숨김으로  -->

  <el-main>
    <router-view></router-view>
  </el-main>
 
  <el-footer>&copy; vue project</el-footer>
</el-container>

// 파일명 : components/Login.vue

<div>
    <el-card shadow="always">

        <h3>로그인</h3>

        <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
            <el-form-item label="아이디" label-width="120px">
                <el-input v-model="member.userid" size="mini" placeholder="아이디" style="width:192px"></el-input>
            </el-form-item>
        </el-form>
        

        <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
            <el-form-item label="암호" label-width="120px">
                <el-input v-model="member.userpw" size="mini" placeholder="암호" show-password></el-input>
            </el-form-item>
        </el-form>


        <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
            <el-form-item label=" " label-width="120px">
                <el-button type="primary" size="mini" @click="handleLogin">로그인</el-button>
                <el-button size="mini">홈</el-button>
            </el-form-item>
        </el-form>
    </el-card>

</div>

// 파일명 : components/Logout.vue

<div>

</div>

// 파일명 : components/Mypage.vue

<div>
    <h4>마이페이지</h4>

    <el-card shadow="always">
        <el-tabs :tab-position="tabPosition" style="height: 200px">
            <el-tab-pane label="정보수정">
                <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
                    <el-form-item label="이름" label-width="120px">
                        <el-input v-model="member.username" ref="username" size="mini" placeholder="이름"></el-input>
                    </el-form-item>            
                </el-form>

                <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
                    <el-form-item label="이메일" label-width="120px">
                        <el-input v-model="member.useremail" ref="useremail" size="mini" placeholder="이메일"></el-input>
                    </el-form-item>
                    <el-form-item >@</el-form-item>
                    <el-form-item >
                        <el-select v-model="member.useremail1" ref="useremail1" size="mini" placeholder="선택">
                            <el-option v-for="tmp in emailOption" :key="tmp" 
                                :label="tmp" :value="tmp"></el-option>
                        </el-select>
                    </el-form-item>        
                </el-form>
                <el-button type="primary" size="mini" @click="nameChange">수정하기</el-button>
            </el-tab-pane>
            <el-tab-pane label="비밀번호변경">( 현재비번, 바꿀비번2번)</el-tab-pane>
            <el-tab-pane label="회원탈퇴">(현재비번)</el-tab-pane>
        </el-tabs>
    </el-card>
</div>

// 파일명 : component/Board.vue

<div>
    <el-card shadow="always">
        <h3>게시판</h3>

        <el-tabs tab-position="left" style="height: 200px">
            <el-tab-pane label="자유게시판">
                <menu-1></menu-1>
            </el-tab-pane>
            <el-tab-pane label="질문및답변">
                <menu-2></menu-2>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</div>

// 파일명 : components/board/Menu1.vue