exam_front

0.先端項目の作成

CMD> vue create exam_front
選択=>(デフォルト)vue 3
CMD> cd exam_front
--ルーターの使用
CMD> npm install vue-router@next --save
--storeの使用
CMD> npm install vuex@next --save
--axiosを使用
CMD> npm install axios --save
--element-plus uiの使用
CMD> npm install [email protected] --save
//vue.config.jsの作成

module.exports = {
    devServer:{
        proxy : {
            '/member' : {
                target:'http://localhost:3000',
                changeOrigin :true,
                logLevel : 'debug'
            },
        },
    }
}

--サーバドライバ
CMD> npm run serve

1. vue.config.js

エージェント設定

module.exports = {
    devServer:{
        proxy : {
            '/member' : {
                target:'http://localhost:3000',
                changeOrigin :true,
                logLevel : 'debug'
            },
        },
    }
}

2. routes.js

ルータ構成

import { createRouter, createWebHashHistory  } from 'vue-router' 

import Home from '@/components/HomeView';
import Login from '@/components/LoginView';
import Logout from '@/components/LogoutView';
import Join from '@/components/JoinView';
import Mypage from '@/components/MypageView';

const routes =[
    { path : '/', redirect:'/home'},
    { path : '/home', name:'Home', component:Home },
    { path : '/login', name:'Login', component:Login },
    { path : '/logout', name:'Logout', component:Logout },
    { path : '/join', name:'Join', component:Join },
    { path : '/mypage', name:'Mypage', component:Mypage },    
];

const router = createRouter({ 
    history : createWebHashHistory(), 
    routes  : routes
});

export default router;

3. main.js

ライブラリ

の有効化

import { createApp } from 'vue'
import App from './App.vue'

import routes from './routes';

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// index만 땡겨오면 됨, 모듈은 안땡겨도 됨
import stores from './stores/index';

const app = createApp(App);
// 컴포넌트에서 사용가능하도록 설정
app.use(routes);
app.use(ElementPlus);
app.use(stores);

app.mount('#app');

4. App.vue

storeを使用してログステータス

を設定

<template>
    <div>        
        <router-link style="text-decoration:none" :to="{ path: '/' }" ><el-button>홈</el-button></router-link>
        <router-link v-if="!state.logged" style="text-decoration:none" :to="{ path: '/login' }"><el-button>로그인</el-button></router-link>
        <router-link v-if="!state.logged" style="text-decoration:none" :to="{ path: '/join' }"><el-button>회원가입</el-button></router-link>
        <router-link v-if="state.logged" style="text-decoration:none" :to="{ path: '/mypage' }"><el-button>마이페이지</el-button></router-link>
        <router-link v-if="state.logged" style="text-decoration:none" :to="{ path: '/logout' }"><el-button>로그아웃</el-button></router-link>
        <hr>
        <router-view></router-view>
        <hr>
        {{state.logged}}
        <h4 class="center">footer</h4>
    </div>
</template>

<script>
import { computed, onMounted, reactive } from '@vue/runtime-core';
import { useStore } from 'vuex'

export default {
    setup () {
        const store = useStore();

        const state = reactive({
            logged : computed( () => store.getters['moduleA/getLogged']),
            token : sessionStorage.getItem("TOKEN")
        })
        // console.log(state.logged);

        onMounted( () => {
            if(state.token === null){
                store.commit('moduleA/setLogged', false);
            }
            else {
                store.commit('moduleA/setLogged', true);
            }
        })        

        return {
            state,
        }
    }
}
</script>

<style lang="css" scoped>
.center {
    text-align: center;
}
</style>

5. component/HomeView.vue

storeのモジュールを使用して、他の関数

を実行します.

<template>
    <div>
        <h3 class="center">홈화면</h3>
        <el-button @click="handleInc">1증가</el-button>
        {{state.num}}
    </div>
</template>

<script>
import { reactive } from '@vue/reactivity';
import { useStore } from 'vuex'
import { computed } from '@vue/runtime-core';
export default {
    setup () {
        const store = useStore();

        const state = reactive({
            num : computed(() => store.getters['moduleB/getNum']),
        })
        
        const handleInc =() => {
            store.commit('moduleB/setNum', state.num+1);
        }

        return {
            state,
            handleInc
        }
    }
}
</script>

6. stores

6-1. store/index.js

モジュールは、

のインポートにのみ使用する.

import {createStore} from 'vuex';
import { moduleA } from './module/moduleA';
import { moduleB } from './module/moduleB';

export default createStore({
    modules : {moduleA, moduleB}
})

6-2. store/module/moduleA.js

ログステータスチェック

export const moduleA = {
    
    namespaced : true,

    state : {
        logged : false,
    },
    getters : {
        getLogged(state) {
            return state.logged;
        }
    },
    mutations : {
        setLogged(state, value) {
            state.logged = value;
        }
    },
    actions : {

    }

}

6-3. store/module/moduleB.js

ホームページテスト用

export const moduleB = {
    
    namespaced : true,

    state : {
        num : 10,
    },
    getters : {
        getNum(state) {
            return state.num;
        }
    },
    mutations : {
        setNum(state, value) {
            state.num = value;
        }
    },
    actions : {
        
    }

}

7.その他のビュー

component/JoinView.vue

component/LoginView.vue

component/LogoutView.vue

component/MypageView.vue

component/mypage/Mypage1View.vue

component/mypage/Mypage2View.vue