SPA25 Vuex - 프로젝트 구조화 및 모듈화 *프로젝트 구조화와 모듈화 방법1 -아래와 같은 store 구조를 어떻게 모듈화 할 수 있을까? 예제) // store.js import Vue form 'vue' import Vuex from 'vuex' export const store = new Vuex.Store({ state : {}, getter : {}, mutations : {}, actions : {} }); 힌트 : Vuex.Store({})의 속성을 모듈로 연결 -ES6의 import & Export를 이용하여 속성별로 모듈화 import Vue from 'vue' import Vuex form 'vuex' import * as getters from 'store/getters.js' import * as mutatio.. 2021. 5. 3. Vuex - 헬퍼 함수 *각 속성들을 더 쉽게 사용하는 방법 - Helper store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법 -state -> mapState -getters - > mapGetters -mutations -> mapMutations -actions -> mapActions * 헬퍼의 사용법 -헬퍼를 사용하고자 하는 Vue파일에서 아래와 같이 해당 헬퍼를 로딩 //App.vue import {mapState} from 'vuex' import {mapGetters } from 'vuex' import {mapMutations} from 'vuex' import {mapActions} from 'vuex' export default { computed(){... mapState(['num'].. 2021. 5. 3. Vuex- 주요 기술 요소 Vuex 기술 요소 - state : 여러 컴포넌트에 공유 되는 데이터 data - getters : 연산된 state 값을 접근하는 속성 computed - mutations : state값을 변경하는 이벤트 로직, 메서드 methods - actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods *state란? - 여러 컴포넌트 간에 공유할 데이터 = 상태 // vue data : { massage : " hello vue.js"; } //Vuex state : { message : "hello vue.js"; } {{message}} {{this.$store.state.message}} *getters란? : state 값을 접근하는 속성이자 computed(.. 2021. 5. 3. ES6 for Vue.js - Modules Modules : 자바스크립트 모듈화 방법 -자바스크립트 모듈 로더 라이브러리 (AMD, Commons JS)기능을 js 언어 자체에서 지원 -호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음 * Vuex : 상태 관리 라이브러리 개요 -복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 Vuex라이브러리 소개 -Vuex 라이브러리의 등장 배경인 Flux패턴 소개 -Vuex 라이브러리의 주요 속성인 state, gatters, mutations, actions 학습 -Vuex를 더 쉽게 코딩할 수 있는 방법인 Helper기능 소개 -Vuex로 프로젝트를 구조화하는 방법과 모듈 구조화 방법 소개 목차 -Vuex 라이브러리 소개 -Flux 패턴 소개 -Vuex 컨셉과 구조 -Vuex .. 2021. 4. 30. ES6 for Vue.js - Enhanced Object Literals (향상된 객체 리터럴) - Enhanced Object Literals : 향상된 객체 리터럴 1. 객체의 속성을 메서드로 사용할 때 function예약어를 생략하고 생성 가능 var dictionary = { words : 100, //ES5 lookup : function (){ console.log("find words"); }, //ES6 lookup(){ console.log("find words"); } } 2. 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능 예시1) var figures = 10; var dictionary = { // figures : figures figures }; 예시2) components: { 'TodoFooter' : TodoFooter, 'TodoHead.. 2021. 4. 30. ES6 for Vue.js - 화살표 함수 Arrow Function : 화살표 함수 -함수를 정의할 때 fucntion 이라는 키워드를 사용하지 않고 =>로 대체 -흔히 사용하는 콜백 함수의 문법을 간결화 1. 기본 사용법 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다. () => { return { a: 1 }.. 2021. 4. 30. 이전 1 2 3 4 5 다음
