[Vue] Vuex 란? ( npm, 기본 구문 )

Vuex 설치 명령어

//npm
npm install vuex@next --save

//yarn
yarn add vuex@next --save

vuex

Vuex는 Vue.js의 applications이며 state management pattern( 상태 관리 패턴 ) 역할을 합니다.

 

모든 컴포넌트에서 접근할 수 있는 중앙 데이터 저장소로 코드의 재사용성을 확장시켜주는 기능이 있습니다.

 

상위 컴포넌트와 하위 컴포넌트 간에 props, emit 같은 기능의 상위 호환이라고 생각하시면 됩니다.

 

vue 3 버전은 vuex 4 버전은 호환하고 vue 2 버전은 vuex 3 버전을 호환합니다.

vuex 예시코드

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'

const app = createApp(App)

app.use(store).mount('#app')

Main.js에서 store를 선언하고 사용할 수 있습니다.

 

또한 부모 store와 자식 store를 구분하여

 

자식 store를 모듈화 하여 부모에 속한 store로 정의할 수 있습니다. ( 자세한 내용은 다른 포스팅에서 다루겠습니다.)

 

단일 store의 사용 방식 예제입니다.

store.js 

imort { createStore } from 'vuex'

const store = createStore({
    state(){
        return{
            data : '안녕하세요 저는 vuex입니다.'
        }
    },
      mutations : {
        setData(state){
            state.data = '안녕하세요 저는 Mutations 입니다.'
        }
    },
      actions : {
        setData(context){
            setInterVal({
              this.commit('setData', '안녕하세요 저는 Actions 입니다.')
            }, 5000)
        }
    }
})

export default store

위와 같이 store를 사용할 수 있습니다.

 

Vue.Js의 Vuex는 Flux 패턴을 지향합니다.

Flux pattern

Flux패턴의 단방향 데이터 흐름입니다.

 - 데이터의 흐름이 나뉘지 않고 단방향으로만 처리합니다.

 - 패턴 자체에서 데이터 흐름을 정형화하여 향후에 발생하는 문제점들을 방지합니다.

 

store의 mutations와 actions 함수의 첫 매개변수는 항상 proxy 타입을 갖습니다.

 

첫 매개변수에는 state와 context로 접근할 수 있습니다.

 

state는 모든 store의 데이터를 접근할 수 있으며

 

context는 현재 사용중인 store의 데이터에만 접근할 수 있습니다.

 

store의 함수는 총 두개의 Object를 매개변수로 받을 수 있지만

 

배열로 감싸 여러개의 매개변수를 가질 수 있습니다.

매개변수가 1개일 경우

setData(state, text){
    state.data = text
}

매개변수가 2개 이상일 경우

setData(state, {text, id}){
    state.data = text + id
}

위와 같은 방식으로 여러 개의 매개변수를 사용합니다.

 

일반적으로 state에는 변수,

 

mutations에는 동기 함수,

 

actions에는 비동기 함수를 사용합니다.

상태 관리 패턴이란?

상태 관리 패턴의 3요소

• state => 진리의 소스 값 ( 데이터 ) 
• view => 선언된 매핑한 state ( 데이터를  렌더링 하는 화면 )
• actions => 사용자의 입력에 따른 반응형 state 변경 방법 ( 사용자의 입력에 따라 데이터를 변경하는 Method )

사용자가 정의하는 App이 단순하다면 Vuex가 없어도 상관없습니다.

 

하지만 규모가 커질수록 Vuex의 효율과 확장성이 더욱 좋아지는 vue.js의 내장 라이브러리입니다.

 

Vuex 사용 규칙

Vuex의 state에 저장된 변수의 값은 항상 mutations와 actions의 함수로 변경되어야 합니다.

 

예를 들어 Java의 Setter와 같은 역할을 지정하여

 

state의 진리값을 변경해주어야 SPA의 규모가 커질수록

 

데이터의 관리와 추적이 용이해집니다.

store.js 

state(){
    data : ''
},
mutations(){
  setDataFunction(state, text){
    // setter 메소드를 사용하여 변경하는 것이 관리, 추적에 용이합니다.
      state.data = text
  }
}

//

component.vue
import { mapMutations } from 'vuex'

<script>
  methods : {
    // commponent에서 store의 view를 사용하려면 사전에 선언하여야 합니다.
      ...mapMutations({
        setDataFunction : 'setDataFunction'
    })
  },

  // 중간 생략
  this.$store.state.data = '직접 변경은 가능하지만 권장하지 않습니다.'

  // 이 구문은 컴포넌트에서 store의 함수를 사용할 때 사용되는 문법입니다.
  this.setDataFunction(text)

</script>

오늘 포스팅한 내용으로 기본적인 Vuex 사용방법을 익혀봤습니다.

 

중앙 데이터 저장소 같은 Vuex는 Vue의 선언적 렌더링에 기름칠을 해주어 더 빛나게 해 주는 것 같습니다.

 

다음 포스팅에서는 Store 내부에서의 Mutations와 Actions 간에 호출 구문을 다루어 보겠습니다.