{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-vuex-저장소-store-속성-및-모듈화/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"b0a22007-475b-5bf2-9c5d-dda3a2fb7d9e","excerpt":"Vue Js Vuex 저장소(store) 속성 및 모듈화 폴더 모듈화 & Namespacing Vue Js Vuex Modules 중간 크기 이상의 복잡한 앱을 제작할 때 getters & mutations & actions 의 이름을 유일하게 정하지 않으면 namespace…","html":"

\"Vue

\n

폴더 모듈화 & Namespacing

\n

\"Vue

\n
import Vue from \"vue\"\nimport Vuex from \"vuex\"\n\nVue.use(Vuex)\n\nimport coffee from \"./modules/coffee\"\nimport shop from \"./modules/shop\"\n\nexport default new Vuex.Store({\n  // count state 속성 추가\n  state: {\n    count: 0, // count 를 0 으로 초기화\n  },\n  getters: {\n    getCount: function (state) {\n      return state.count\n    },\n  },\n  mutations: {\n    addCount: function (state, payload = 1) {\n      console.log(\"addCount\")\n      return (state.count = state.count + payload)\n    },\n  },\n  actions: {\n    addCount: function (context, payload) {\n      // commit 의 대상인 addCount 는 mutations 의 메서드를 의미한다.\n      // 비동기 로직 수행후\n      return setTimeout(function () {\n        context.commit(\"addCount\", payload.count)\n      }, 1000)\n    },\n  },\n  modules: { coffee, shop },\n})
\n

중간 크기 이상의 복잡한 앱을 제작할 때 getters & mutations & actions 의 이름을 유일하게 정하지 않으면 namespace 충돌이 난다. 따라서, 네임스페이스를 구분하기 위해 types.js 로 각 속성의 이름들을 빼고 store.js 와 각 컴포넌트에 import 하여 사용하는 방법이 있다. 혹은 modules 라는 폴더로 만들어 각 단위별로 파일을 분리해서 관리하는 방법도 있다.

\n

Vuex 가 생각보다 복잡하므로 앱이 커서 중형 이상의 앱에서만 사용하는게 좋다. 간단한 화면 개발에는 오히려 Vuex 를 사용하지 않고 개발 하는것을 추천 한다.

","tableOfContents":"","wordCount":{"words":87},"fields":{"slug":"/vue/vue-js-vuex-저장소-store-속성-및-모듈화/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js Vuex 저장소(store) 속성 및 모듈화","date":"2021년 4월 11일","dateISO":"2021-04-11T21:11:34.709Z","updatedISO":null,"category":"vue","description":"중간 크기 이상의 복잡한 앱을 제작할 때 getters & mutations & actions 의 이름을 유일하게 정하지 않으면 namespace 충돌이 난다. 따라서, 네임스페이스를 구분하기 위해 types.js 로 각 속성의 이름들을 빼고 store.js 와 각 컴포넌트에 import 하여 사용하는 방법이 있다. 혹은 modules 라는 폴더로 만들어 각 단위별로 파일을 분리해서 관리하는 방법도 있다.","tags":["vue","javascript","framework","frontend","web","vuex","modules"]}}},"pageContext":{"slug":"/vue/vue-js-vuex-저장소-store-속성-및-모듈화/","previous":{"fields":{"slug":"/vue/vue-js-vuex-state-mutations-actions-getters-이해-및-활용/"},"frontmatter":{"title":"Vue Js Vuex State, Mutations, Actions, Getters 이해 및 활용","tags":["vue","javascript","framework","frontend","web","vuex","mutations","actions","getters"]}},"next":{"fields":{"slug":"/vue/vue-js-axios-및-rest-api-를-활용한-crud-구현/"},"frontmatter":{"title":"Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현","tags":["vue","javascript","framework","frontend","web","axios","ajax","crud"]}}}},"staticQueryHashes":["213619243","3262363727"]}