반응형 vuex4 🔗 vuex jest 사용 📘 vuex 사용화면 vuex내용은 간단하다. Promise 객체를 통해 사용자 정보를 세팅하는 과정이다. // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { userInfo: { name: '', age: 0 } }, mutations: { setUserInfo(state, payload) { state.userInfo = payload } }, getters: { getUserInfo(state) { return state.userInfo } }, actions: { apiSetUserInfo({ commit }) { new Promise((r.. 2024. 3. 31. 🛎 vuex 모듈화 🗝 vuex 모듈화 하는 이유 기존에 모듈화를 사용하지 않고 했을때 사이즈가 점점 커짐에 따라 관리가 힘들어지는 단점이 생김 그리하여 업무 성격에 맞게 모듈화를 해야겠다는 필요성을 느낌 🎁 기존 방식에서 모듈화 방식을 바뀔때의 모습 기존방식 모듈화방식 위 방식으로 했을때 처음에는 구조를 잡기가 어렵지만, 좀 더 체계적으로 관리가 된다는 장점이 존재한다. 🎊 vuex 모듈화 구조 |---store | |---modules | |---moduleA.js // moduleA작성 | |---moduleB.js // moduleB작성 |--index.js // 모듈 등록 📮 moudleA 구조 소스 const moduleA = { namespaced: true, state: () => ({ obj1: {}, }).. 2023. 1. 18. 🤖 vue auto routing + 네비게이션 가 import { createRouter, createWebHistory } from 'vue-router' import routes from 'vue-auto-routing' import { createRouterLayout } from 'vue-router-layout'; import store from '../store'; const RouterLayout = createRouterLayout(layout => { return import('@/layouts/' + layout + '.vue') }) const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [ { path: '/', component: .. 2022. 5. 5. 👍 Vuex를 이용한 로그인 관리 👍 Vuex를 이용한 로그인 관리 이번에는 Vuex와 JWT를 이용하여 Token을 관리하고자 한다. 사실 현업에서는 세션쿠키를 더 쓰는걸로 알고 있지만, Token으로 구현해보았다, 순서는 userStore생성 => Vuex에 Token 저장 => 새로고침 할 경우 토큰 저장 1️⃣userStore생성 처음에는 store > modules 폴더 밑에 userStore 를 생성한다 //userStore.js const userStore = { namespaced: true, state: {}, getters: {}, mutations: {}, actions: {}, }; export default userStore; * 폴더 위치는 아래 사진에 첨부한다. 2️⃣Vuex에 Token 저장 저 같은 경우 로.. 2021. 7. 16. 이전 1 다음 반응형
