Commit @8240019eb82b481f6bd1c914d41ae6d8ad223552

woals 08-20

240820 권민수 대시보드 진입 시 쿼리 사용 방식에서 vuex state이용 방식으로 변경

@8240019eb82b481f6bd1c914d41ae6d8ad223552

3bf9d97

8240019

client/views/index.js

--- client/views/index.js

+++ client/views/index.js


 
 import AppRouter from './pages/AppRouter.js';
 import App from './App.vue';
+import AppStore from './pages/AppStore.js';
 // import Login from './Login.vue';
 
 const vue = createApp(App).use(AppRouter)
 // .component('login-page', Login)
+.use(AppStore)
 .mount('#root');
 
 

3bf9d97

8240019

client/views/pages/AppStore.js

--- client/views/pages/AppStore.js

+++ client/views/pages/AppStore.js


         token: null,
         userId: null,
         authcd: null,
+        stdId: null,
+        schdlId: null,
+        bookId: null,
+        unitId: null,
     },
     getters: {
         isLoggedIn(state) {

                 userId: state.userId,
                 authcd: state.authcd,
             }; 
-        }
+        },
+        getStdId(state) {
+            return state.stdId;
+        },
+        getSchdlId(state) {
+            return state.schdlId;
+        },
+        getBookId(state) {
+            return state.bookId;
+        },
+        getUnitId(state) {
+            return state.unitId;
+        },
     },
     mutations: {
         setToken(state, token) {

         clearToken(state) {
             state.token = null;
             state.userId = null; 
-            state.authcd = null; 
+            state.authcd = null;
+            state.stdId = null;
+            state.schdlId = null;
+            state.bookId = null;
+            state.unitId = null;
         },
         setUser(state, userId) {
             state.userId = userId; 
         },
         setAuthcd(state, authcd) {
             state.authcd = authcd; 
+        },
+        setStdId(state, stdId) {
+            state.stdId = stdId;
+        },
+        setSchdlId(state, schdlId) {
+            state.schdlId = schdlId;
+        },
+        setBookId(state, bookId) {
+            state.bookId = bookId;
+        },
+        setUnitId(state, unitId) {
+            state.unitId = unitId;
         }
     },
     actions: {

             commit('clearToken');
             localStorage.removeItem('token');
         },
+        updateStdId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit('setStdId', payload);
+                resolve();
+            });
+        },
+        updateSchdlId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit('setSchdlId', payload);
+                resolve();
+            });
+        },
+        updateBookId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit('setBookId', payload);
+                resolve();
+            });
+        },
+        updateUnitId({ commit }, payload) {
+            return new Promise((resolve) => {
+                commit('setUnitId', payload);
+                resolve();
+            });
+        }
     }
 });

3bf9d97

8240019

client/views/pages/main/MyPlan.vue

--- client/views/pages/main/MyPlan.vue

+++ client/views/pages/main/MyPlan.vue


 import axios from "axios";
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiWindowClose } from '@mdi/js';
+import { mapActions } from "vuex";
+import { mapGetters } from 'vuex';
 
 
 export default {

         }
     },
     methods: {
+
+        ...mapActions(['updateSchdlId', 'updateBookId', 'updateUnitId']),
+
         goToPage(page, scheduleId) {
         const startScheduleIndex = this.schedules.findIndex(schedule => schedule.schdl_id === scheduleId);
 

         Promise.all(updates)
             .then(() => {
                 const schedule = this.schedules[startScheduleIndex];
-                this.$router.push({ 
-                    name: page,
-                    query: {
-                        schdl_id: schedule.schdl_id,
-                        book_id: schedule.book_id,
-                        unit_id: schedule.unit_id
-                    }
+                // this.$router.push({ 
+                //     name: page,
+                //     query: {
+                //         schdl_id: schedule.schdl_id,
+                //         book_id: schedule.book_id,
+                //         unit_id: schedule.unit_id
+                //     }
+                // });
+                // 상태 업데이트가 완료된 후 라우팅
+                Promise.all([
+                    this.updateSchdlId(schedule.schdl_id),
+                    this.updateBookId(schedule.book_id),
+                    this.updateUnitId(schedule.unit_id)
+                ]).then(() => {
+                    console.log("Book ID:", this.getBookId);
+                    console.log("Unit ID:", this.getUnitId);
+
+                    this.$router.push({ name: page });
+                }).catch(error => {
+                    console.error("상태 업데이트 중 오류 발생:", error);
                 });
             })
             .catch(error => {

 
     },
     computed: {
-
+        ...mapGetters(['getBookId', 'getUnitId'])
     },
     components: {
         SvgIcon

Add a comment

Open 0
Closed 0

List

...	...	@@ -7,10 +7,12 @@
7	7
8	8	import AppRouter from './pages/AppRouter.js';
9	9	import App from './App.vue';
	10	+import AppStore from './pages/AppStore.js';
10	11	// import Login from './Login.vue';
11	12
12	13	const vue = createApp(App).use(AppRouter)
13	14	// .component('login-page', Login)
	15	+.use(AppStore)
14	16	.mount('#root');
15	17
16	18

...	...	@@ -82,6 +82,8 @@
82	82	import axios from "axios";
83	83	import SvgIcon from '@jamescoyle/vue-icon';
84	84	import { mdiMagnify, mdiWindowClose } from '@mdi/js';
	85	+import { mapActions } from "vuex";
	86	+import { mapGetters } from 'vuex';
85	87
86	88
87	89	export default {
...	...	@@ -104,6 +106,9 @@
104	106	}
105	107	},
106	108	methods: {
	109	+
	110	+ ...mapActions(['updateSchdlId', 'updateBookId', 'updateUnitId']),
	111	+
107	112	goToPage(page, scheduleId) {
108	113	const startScheduleIndex = this.schedules.findIndex(schedule => schedule.schdl_id === scheduleId);
109	114
...	...	@@ -140,13 +145,26 @@
140	145	Promise.all(updates)
141	146	.then(() => {
142	147	const schedule = this.schedules[startScheduleIndex];
143		- this.$router.push({
144		- name: page,
145		- query: {
146		- schdl_id: schedule.schdl_id,
147		- book_id: schedule.book_id,
148		- unit_id: schedule.unit_id
149		- }
	148	+ // this.$router.push({
	149	+ // name: page,
	150	+ // query: {
	151	+ // schdl_id: schedule.schdl_id,
	152	+ // book_id: schedule.book_id,
	153	+ // unit_id: schedule.unit_id
	154	+ // }
	155	+ // });
	156	+ // 상태 업데이트가 완료된 후 라우팅
	157	+ Promise.all([
	158	+ this.updateSchdlId(schedule.schdl_id),
	159	+ this.updateBookId(schedule.book_id),
	160	+ this.updateUnitId(schedule.unit_id)
	161	+ ]).then(() => {
	162	+ console.log("Book ID:", this.getBookId);
	163	+ console.log("Unit ID:", this.getUnitId);
	164	+
	165	+ this.$router.push({ name: page });
	166	+ }).catch(error => {
	167	+ console.error("상태 업데이트 중 오류 발생:", error);
150	168	});
151	169	})
152	170	.catch(error => {
...	...	@@ -220,7 +238,7 @@
220	238
221	239	},
222	240	computed: {
223		-
	241	+ ...mapGetters(['getBookId', 'getUnitId'])
224	242	},
225	243	components: {
226	244	SvgIcon

...	...	@@ -5,6 +5,10 @@
5	5	token: null,
6	6	userId: null,
7	7	authcd: null,
	8	+ stdId: null,
	9	+ schdlId: null,
	10	+ bookId: null,
	11	+ unitId: null,
8	12	},
9	13	getters: {
10	14	isLoggedIn(state) {
...	...	@@ -15,7 +19,19 @@
15	19	userId: state.userId,
16	20	authcd: state.authcd,
17	21	};
18		- }
	22	+ },
	23	+ getStdId(state) {
	24	+ return state.stdId;
	25	+ },
	26	+ getSchdlId(state) {
	27	+ return state.schdlId;
	28	+ },
	29	+ getBookId(state) {
	30	+ return state.bookId;
	31	+ },
	32	+ getUnitId(state) {
	33	+ return state.unitId;
	34	+ },
19	35	},
20	36	mutations: {
21	37	setToken(state, token) {
...	...	@@ -24,13 +40,29 @@
24	40	clearToken(state) {
25	41	state.token = null;
26	42	state.userId = null;
27		- state.authcd = null;
	43	+ state.authcd = null;
	44	+ state.stdId = null;
	45	+ state.schdlId = null;
	46	+ state.bookId = null;
	47	+ state.unitId = null;
28	48	},
29	49	setUser(state, userId) {
30	50	state.userId = userId;
31	51	},
32	52	setAuthcd(state, authcd) {
33	53	state.authcd = authcd;
	54	+ },
	55	+ setStdId(state, stdId) {
	56	+ state.stdId = stdId;
	57	+ },
	58	+ setSchdlId(state, schdlId) {
	59	+ state.schdlId = schdlId;
	60	+ },
	61	+ setBookId(state, bookId) {
	62	+ state.bookId = bookId;
	63	+ },
	64	+ setUnitId(state, unitId) {
	65	+ state.unitId = unitId;
34	66	}
35	67	},
36	68	actions: {
...	...	@@ -42,5 +74,29 @@
42	74	commit('clearToken');
43	75	localStorage.removeItem('token');
44	76	},
	77	+ updateStdId({ commit }, payload) {
	78	+ return new Promise((resolve) => {
	79	+ commit('setStdId', payload);
	80	+ resolve();
	81	+ });
	82	+ },
	83	+ updateSchdlId({ commit }, payload) {
	84	+ return new Promise((resolve) => {
	85	+ commit('setSchdlId', payload);
	86	+ resolve();
	87	+ });
	88	+ },
	89	+ updateBookId({ commit }, payload) {
	90	+ return new Promise((resolve) => {
	91	+ commit('setBookId', payload);
	92	+ resolve();
	93	+ });
	94	+ },
	95	+ updateUnitId({ commit }, payload) {
	96	+ return new Promise((resolve) => {
	97	+ commit('setUnitId', payload);
	98	+ resolve();
	99	+ });
	100	+ }
45	101	}
46	102	});

Delete comment