Vue/Vuex
-
Vuex 핵심 컨셉(5) - 모듈(module)Vue/Vuex 2021. 7. 2. 11:35
단일 상태 트리를 사용하기 때문에 어플리케이션의 하나의 큰 객체 안에 포함 규모가 커짐에 따라 저장소는 매우 비대해질 수 있다. 이를 위해 Vuex는 Store를 모듈로 나눌 수 있다. 각 모듈은 자체 상태, 변이, 액션, getters 및 중첩된 모듈을 포함할 수 있다. const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = createStore({ modules: { a: moduleA, b: moduleB } }..
-
Vuex 핵심 컨셉(4) - 액션(actions)Vue/Vuex 2021. 7. 1. 18:08
- 액션(actions) 변이(mutation)와 유사 변이와 차이점 상태를 변이 시키는 대신 액션으로 변이에 대한 커밋을 함 작업에는 임의의 비동기 작업이 포함될 수 있음 액션 Handler는 Store 인스턴스의 동일한 메소드/프로퍼티 정보를 가지고 있는 컨텍스트(context) 객체를 받는다. context.commit: 변이를 커밋 context.state: 상태에 접근 context.getters: getters에 접근 // store/index.js const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { cont..
-
Vuex 핵심 컨셉(3) - 변이(mutations)Vue/Vuex 2021. 7. 1. 17:03
- 변이(mutations) Vuex Store에서 실제로 상태를 변경하는 유일한 방법 이벤트와 매우 유사 각 변이에는 문자열 타입, Handler 존재 Handler 함수는 실제 상태 수정을 하는 곳이며, 첫번째 전달인자로 상태(state)를 받는다. Handler 함수를 직접 호출 할 수 없다.(이벤트 등록과 유사) Handler 함수를 호출하려면 해당 타입과 함께 store.commit을 호출 // store/index.js const store = createStore({ state: { count: 1 }, mutations: { increment (state) { // mutate state state.count++ } } }) // Vue component에서 호출 store.commit('..
-
Vuex 핵심 컨셉(2) - GettersVue/Vuex 2021. 7. 1. 15:25
- 둘 이상의 컴포넌트에서 Store 상태를 기반으로 computed를 계산해야 하는 경우 (예: 아이템 리스트를 필터링하고 계산) computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } 함수 복제 공유된 헬퍼를 추출하여 여러 위치에서 가져오기 => 둘 다 이상적이지 않다. - 위와 같은 경우 Vuex를 사용하여 Store에서 'getters'를 정의 Store의 computed 속성으로 생각할 수 있음 computed 속성처럼 getter의 결과는 종속성에 따라 캐쉬되고, 일부 종속성이 변경된 경우에만 다시 재계산 getters는 첫번째 전달인자로 상태(state)를 받는다. co..
-
Vuex 핵심 컨셉(1) - 상태Vue/Vuex 2021. 7. 1. 13:59
Vuex는 단일 상태 트리를 사용 즉, 이 단일 객체는 모든 어플리케이션 수준의 상태를 포함하여 '원본 소스' 역할 각 어플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있음 Vuex Store의 데이터는 Vue 인스턴스의 데이터와 동일한 규칙을 가진다. - Vuex 상태를 Vue 컴포넌트에서 가져오기 가장 간단한 방법은 computed 속성 내에서 일부 저장소 상태를 가져오는 것 store의 값이 변경되면 computed 속성이 다시 변경되고 관련 DOM 업데이트가 트리거 된다. Vuex는 store 옵션( Vue.use(Vuex) )으로 루트 컴포넌트의 모든 자식 컴포넌트에 저..
-
Vuex 시작하기(3) - StoreVue/Vuex 2021. 6. 30. 16:16
- Store 모든 Vuex 어플리케이션의 중심 어플리케이션 상태를 보유하고 있는 컨테이너 Vuex Store와 일반 전역 객체 차이점 Vuex.store는 반응형 Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트 Store의 상태 직접 변경 불가 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이 이렇게하면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있음 - 기본 예제: 가장 단순한 저장소 // store/index.js import { createApp } from 'vue' import { createStore } from 'vuex' // Create a new store instance. c..
-
Vuex 시작하기(2) - 설치Vue/Vuex 2021. 6. 30. 15:43
- 직접 다운로드 https://unpkg.com/vuex@4 - CDN - NPM npm install vuex@next --save - Yarn yarn add vuex@next --save - 모듈 시스템과 함께 사용하면 Vue.use()를 통해 Vuex를 명시적으로 추가해야 한다. (전역 스크립트 태그를 사용할 때는 이 작업을 할 필요가 없다.) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) - Promise Vuex는 Promise를 필요로 한다. Promise를 지원하지 않는 브라우저일 경우 polyfill 라이브러리 사용 필수 // CDN npm install es6-promise --save // NPM yarn add es6-p..
-
Vuex 시작하기(1) - Vuex란 ?Vue/Vuex 2021. 6. 30. 15:04
- Vuex란 무엇인가 ? Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 예측 가능한 방식으로 상태 변경 다른 상태관리 라이브러리와는 달리 Vue.js가 효율적인 업데이트를 위해 세분화된 반응 시스템을 활용하도록 특별히 고안된 라이브러리 - 상태 관리 패턴이란 ? new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 상태: 앱을 작동하는 원본 소스 뷰: 상태의 선언적 매핑 액션: 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 - 한계점: 공통의 상태를..