Vuex (설치/셋팅) 설명

1. 설명

Vue에 컴포넌트간 부모/자식 데이터 전달은 이벤트(Event)와 프롭스(Props)로 데이터를 전송한다.

 

프로젝트가 간단하고 작으면 event와 props로도 충분히 운영이 가능 하지만 만약 커진다면 유지보수가 어려워고 헷갈리게 쉬운 구조가 되어 개발에 속도를 늦추게 된다.

그래서 나온게 Vuex 이다.

Vuex는 데이터를  View( Vue Components ) => Actions => Mutations => State => View 로 한 방향으로 진행 되는 규칙이다.

 

State : 사용하는 변수이름 / 초기값 을 설정 해 준다.

Actions : Component에서 설정 한 이벤트가 발생하면 Action으로 이벤트를 받는다.

Mutations : Actions에서 받은 이벤트를 계산 또는 State에 있는 변수 값을 변경 해준다. 

View(Vue Components) : Mutations에서 변경된 State값을 받아 화면을 변경 해주거나, Actions로 이벤트를 발생시킨다.

 

사용 방법

1. View(Vue Components)에서 this.$store.dispatch('이벤트명', 전송데이터) 으로 액션으로 이벤트를 발생 시킨다.

ex) this.$store.dispatch('TEST', test)

2. action에서 해당하는 이벤트를 받고 처리를 위해 Mutation으로 커밋한다.

ex)

const TEST = async ({commit, data}) => {
  commit('SET_TEST',data)
}

3. Mutation에서는 데이터를 가공하여 state의 변수값을 변경 시킨다.

ex)

const SET_TEST = async (state, data) => {
  state.token = data
}

export{ SET_TEST }

 

 

2. 설치 

npm i vuex

 

3. 셋팅

3-1. src 디렉토리에 store이라는 폴더를 만들어준다.

3-2. store 디렉토리에 actions, mutations, storeIndex.js 파일을 만들어 준다.

store/

3-3. 필요시 state값, actions값, mutations값, getters값을 추가 하며 개발 하면된다.

 

storeIndex.js에 vuex에서 사용할 store를 세팅해준다. 

storeIndex.js

// Vuex 세팅
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// actions, mutations import
import * as mutations from './mutations'
import * as actions from './actions'

export default new Vuex.Store({
	
	state: {
    //state 값 예시
    token : false,
    test: ''
  },
  
  getters: {
  //getters 예시
    isLogin (state) {
    	if(state.test === false){
        return	state.test === 'false 입니다.'
        }else{
        return	state.test === 'true 입니다.'
        }
    }
  },
  //mutations, actions
  mutations,
  actions
})

 

actions.js 

actions.js

const TEST = async ({commit, data}) => {
  commit('SET_TEST',data)
}

export{ TEST }

mutations.js

mutations.js

const SET_TEST = async (state, data) => {
  state.token = data
}

export{ SET_TEST }

 

App.vue 파일에서 Vuex를 import하여 전역을 사용 할 수 있게 설정한다.

 

import Vue from 'vue'
import App from './App.vue'
import store from './store/storeIndex'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

 

출처 : https://vuex.vuejs.org/kr/