Front

import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' import * as mutations from './mutations' //use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다. Vue.use(Vuex); const storage = { // 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수 fetch(){ const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (localStorage.key(i) !== 'logle..

아래와 같은 store 구조를 어떻게 모듈화 할 수 있을까? // store.js import Vue from 'vue' import Vuex from 'vuex' export const store = new Vuex.Store({ state: {}, getters: {}, mutations:{}, actions:{} }); Vuex.Store({}) 의 속성을 모듈로 연결 ↓ - ES6의 Import & Export 를 이용하여 속성별로 모듈화 import Vue from 'vue' import Vuex from 'vuex' import * as getter from 'store/getters.js' import * as mutations from 'store/mutations.js' import * ..

import Vue from 'vue' import Vuex from 'vuex' //use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다. Vue.use(Vuex); const storage = { // 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수 fetch(){ const arr = []; if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if (localStorage.key(i) !== 'loglevel:webpack-dev-server') { arr.push(JSON.parse(localStorage.getItem(localStora..

{{ originalPrice }}} {{ doublePrice }}} {{ triplePrice }}} {{ forPrice }}}

mapState - vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import {mapState} from 'vuex' computed(){ ...mapState(['num']) // num() { return this.$store.state.num; } } // store.js state: { num:10 } {{ this.num }} mapGetters - vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import { mapGetters } from 'vuex' computed(){ ...mapGetters(['reverseMessage']) } // store.js getters:{ reverseMe..

각 속성들을 더 쉽게 사용하는 방법 - 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(['nu..

vuex 기술 요소 - state : 여러 컴포넌트에 공유되는 데이터 data - getters : 연산된 state 값을 접근하는 속성 computed - mutations : state 값을 변경하는 이벤트 로직, 메서드 methods - actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods state 란? 여러 컴포넌트 간에 공유할 데이터 - 상태 // vue data : { message: "hello vue.js!" } // vuex state: { message: "hello vue.js!" } {{ message }} {{ this.$store.state.message }} getters란? - state 값을 접근하는 속성이자 computed() 처럼 미리 연산된 ..

vuex는 싱글 파일 컴포넌트 체계에서 NPM 방식으로 라이브러리를 설치하는 게 좋다. npm i vuex@3.6.2 --save * ES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음 이렇게 package.json에 "vuex" 가 추가되어 있으면 설치 성공

vuex - 상태 관리 라이브러리 개요 - 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 vuex 라이브러리 소개 - vuex 라이브러이의 등장 배경인 Flux 패턴 소개 - vuex 라이브러리의 주요 속성인 state, getters, mutations, actions 학습 - vuex 를 더 쉽게 코딩할 수 있는 방법인 Helper 기능 소개 - vuex 로 프로젝트를 구조화 하는 방법과 모듈 구조화 방법 소개 vuex 란? - 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 - React의 Flux 패턴에서 기인함 - vue.js의 중고급 개발자로 성장하기 위한 필수 관문 vuex 가 왜 필요할까? vuex말고 이벤트 버스로 해결? - 어디서 이벤트를 보냈는지 혹..

화살표 함수 1. 함수를 정의할때 function 이란 키워드를 사용하지 않고 => 로 대체 2. 흔히 사용하는 콜백 함수의 문법을 간결화 // ES5 함수 정의 방식 var sum = function(a, b){ return a + b; }; // ES6 var sum = (a, b) => { return a + b; } sum(10, 20); // ES5 var arr = ['a', 'b', 'c']; arr.forEach(function(value){ console.log(value); // a, b, c }); // ES6 var arr = ['a', 'b', 'c']; arr.forEach(value => console.log(value)); // a, b, c Modules - 자바스크립트 모..