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>© 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
Author And Source
이 문제에 관하여(20211224), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gegus1220/20211224저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)