728x90 반응형 Dev170 [Vue.js] Todo App 최종 리팩토링 Todo App 리팩토링 사용 기술 ES6 Vuex Vuex Helper Vuex 프로젝트 구조화와 모듈화 store.js import Vue from "vue"; import Vuex from "vuex"; // todo Modules import todoApp from './modules/todoApp.js' Vue.use(Vuex); export const store = new Vuex.Store({ modules: { todoApp } }); todoApp.js const storage = { fetch() { const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (localS.. 2020. 9. 14. [Vue.js] Vuex - 프로젝트 구조화 및 모듈화 프로젝트 구조화와 모듈화 방법 1 Vuex.Store({})의 속성들을 모듈로 연결 ES6의 Import & Export를 이용하여 속성별로 모듈화 // store.js import Vue from 'vue' import Vuex from 'vuex' import * as getters from 'store/getters.js' import * as mutations from 'store/mutations.js' import * as actions from 'store/actions.js' export const store = new Vuex.Store({ state: {}, // getters: getters -> 명칭 같을 경우 통합 가능(ES6 문법) getters, mutations: mutati.. 2020. 9. 14. [Vue.js] Vuex - 헬퍼 함수 Helper Vuex 기술 요소들을 컴포넌트에서 더 편하게 쓸 수 있도록 도와주는 API 종류 state -> mapState getters -> mapGetters mutations -> mapMutations actions -> mapActions 사용법 // App.vue import { mapState, mapGetters, mapMutations, mapAcations } from 'vuex' export default { // this.$store.state.num == mapState(['num']) // this.$store.getters.countedNum == mapGetters(['countedNum']) computed() { ...mapState(['num']), ...mapGet.. 2020. 9. 14. [Vue.js] Vuex - 주요 기술 요소 Vuex 설치하기 Vuex는 싱글 파일 컴포넌트 체계에서 NPM 방식으로 라이브러리를 설치하는게 좋다. ES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있다. // Terminal npm install vuex --save Vuex 등록하기 1. src/store/store.js 생성 // store.js import Vue from "vue"; import Vuex from "vuex"; // Vue 플러그인 사용 // 전역 기능을 사용하기 위해 Vue.use(Vuex); export const stroe = new Vuex.Store({ // }); 2. main.js 에 store.js파일 import // main.js import Vue from 'vue' import App from.. 2020. 9. 11. [Vue.js] Vuex Vuex 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vuex가 필요한 이유 MVC 패턴에서 발생하는 구조적 오류 컴포넌트 간 데이터 전달이 명시적이지 않은 문제 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 들을 해결할 수 있다. Vuex 컨셉 State : 컴포넌트 간에 공유하는 데이터 data() View : 데이터를 표시하는 화면 template Action : 사용자의 입력에 따라 데이터를 변경하는 methods Vuex 구조 컴포넌트 -> 비동기 로직(Actions) -> 동기 로직(Mutations) -> 상태 Flux MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Unidirectio.. 2020. 9. 11. 이전 1 ··· 17 18 19 20 21 22 23 ··· 34 다음