Vuex 러닝 가이드북

등록 / 설정

플러그인 등록

프로젝트 루트 위치에 store/index.js 파일을 만든 후, Vuex 라이브러리를 Vue 애플리케이션의 플러그인으로 등록하는 코드를 작성합니다. 그리고 Vuex를 통해 Store 객체를 생성하는 구문을 설정합니다.

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 스토어 객체 옵션 설정
})

export default store

NOTE

Vuex 라이브러리는 상태 관리를 위한 스토어(Store) 패턴을 사용합니다.

속성 설정 예

스토어 객체 생성 과정에서 설정 가능한 속성은 필요에 따라 선택적으로 추가할 수 있습니다.


 
 
 
 


const store = new Vuex.Store({
  state: { ... },     // = 데이터 (data)
  getters: { ... },   // = 계산된 속성 (computed Properties)
  mutations: { ... }, // = 데이터 변경 (sync)
  actions: { ... }    // = 메서드 (methods, async)
})

도서 데이터(상태)를 관리하는 구성하는 옵션 설정 예를 간단하게 들어보면 다음과 같습니다.




 



 



 



 



new Vuex.Store({
  state: {
    // 도서 데이터
    books: []
  },
  getters: {
    // 재고가 있어 판매 가능한 도서 데이터 반환
    availableBooks() { ... }
  },
  actions: {
    // 도서 데이터 가져오는 액션
    fetchBooks() { ... }
  }
  mutations: {
    // 도서 설정 메서드
    setBooks() { ... }
  }
})

← 스테이트 →