Vuex 도전기

Vuex는 Vue에서 사용하는 상태관리 라이브러리이다.

React에서 사용했던 Redux와 비슷하다. 이것 역시 컴포넌트 간의 데이터 이동을 자유롭게 하기 위해 사용하는데, 사용법은 Redux와 비슷하다.
상태관리 라이브러리는 항상 공부하면서 느끼는 점이 크게 어렵지 않고 사용법이 미숙해서 잘 못다루는 느낌이다. 사용법을 정리하면서 외워볼 생각이다.

Vuex 단순 데이터 바인딩

(설치 명령어 : npm install vuex --save)

1. store.js라는 파일을 하나 만들고 그곳에 정해진 템플릿을 넣는다.

//store.js
import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      
    }
  },
})

export default store

2. return 중괄호 부분에 저장하고 싶은 데이터 값을 객체형태로 넣는다.

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      firstname : 'hyosung',
      lastname : 'kim',
      age : '30'
    }
  },
})

export default store

3. 그리고 원하는 컴포넌트에서 가져다 쓰기만 하면된다. 가져다 쓰는 방법은 $store.state.firstname이런식으로 바인딩만 하면 된다. 따로 설치나 import 하지 않아도 어디서든 접근이 가능함. ㅇㅅㅇ

<template>
	<h4> 나는 {{$store.state.firstname}} {{$store.state.lastname}} 입니다.<h4>
</template>
  // 나는 hyosung kim 입니다.

Vuex 데이터 동적 변경

바인딩한 데이터에 이벤트를 줘서 변경하고 싶다면 store.js로 바꿔달라고 요청을 보내야한다.
직접적으로 바꾸는 것도 가능은 하지만 별로 좋은 방법은 아니기 때문에, 반드시 store.js로 요청하는 방식으로 코드를 만드는게 좋다.

만약 이름을 hyosung park 으로 바꾸고 싶다면?

1. store.js에 mutations 라는 객체를 만들고 함수를 생성한다.

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      firstname : 'hyosung',
      lastname : 'kim',
      age : '30'
    }
  },
  mutations : {
  	nameChange(){
  	
    }
  }
})

export default store

2. nameChange라는 함수를 만들고 그안에 파라미터로 state를 넣어서 실행문을 만든다.

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      firstname : 'hyosung',
      lastname : 'kim',
      age : '30'
    }
  },
  mutations : {
  	nameChange(state){
  		state.name = 'park';
    }
  }
})

export default store

3. 컴포넌트 부분에 어떤 상황에서 바뀌는 지 작성을 해준다. 버튼을 클릭햇을 때 hyosung kim을 hyosung park으로 바꾸겠다. 버튼을 클릭했을 때, kim을 park으로 바꿔줘! 라고 해야하므로, 버튼에 이벤트를 만들어 준다. 방법으로는 $store.commit('mutations에서 만든 함수') 이렇게 작성하면 된다.

<template>
	<h4> 나는 {{$store.state.firstname}} {{$store.state.lastname}} 입니다.<h4>
    <button @click='$store.commit('nameChange')' >버튼</button>
</template>
  // 버튼 클릭시 나는 hyosung park 입니다.

Vuex에서 Axios 통신

컴포넌트 내에서 Axios를 사용해도 되지만, Vuex를 통해 데이터를 받아오면 저장한 후 어떤 컴포넌트에서든 쉽게 빼서 쓸수 있기 때문이 아닐까 하는 생각이 든다. 추가적으로 JWT토큰 같은것도 store에 저장해두고 사용해도 될거 같고... 아무튼 사용법은 아래와 같다.

1. actions라는 객체를 만들고 호출할 함수를 만든다. 또한 state() 함수 안에 more라는 키를 추가해준다. 나는 객체형태로 저장을 할것이기 때문에, 밸류값으로 객체를 넣었다. 그리고 state에 값을 저장하고 싶으면 또 mutation에 함수를 하나 더 만들어야 한다.

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      firstname : 'hyosung',
      lastname : 'kim',
      age : '30',
      more : {},
    }
  },
  mutations : {
  	nameChange(state){
  		state.name = 'park';
    },
    setMore(){
    	
    }
  },
  actions : {
  	getData(){
    	
    }
  }
})

export default store

2. 함수 실행문 부분에 axios 사용법 그대로 작성하면 된다. 이때 파라미터로 context라는 매개변수를 넣어서 사용하는게 일반적이다. 그리고 then()안에 context.commit('저장시키는 함수', 저장하고싶은 값)

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      firstname : 'hyosung',
      lastname : 'kim',
      age : '30',
      more : {},
    }
  },
  mutations : {
  	nameChange(state){
  		state.name = 'park';
    },
    setMore(){
    	
    }
  },
  actions : {
  	getData(context){
    	axios.get('원하는 api 주소')
      	.then((a)=>{context.commit('setMore', a.data)})
    }
  }
})

export default store

3. 다시 mutation으로 돌아와서 a.data 부분을 저장시켜주면 된다. 이때 첫번째 파라미터는 state, 두번째 파라미터는 원하는 데이터 값이다.

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      firstname : 'hyosung',
      lastname : 'kim',
      age : '30',
      more : {},
    }
  },
  mutations : {
  	nameChange(state){
  		state.name = 'park';
    },
    setMore(state, data){
    	state.more = data //more라는 state의 값에 data를 할당.
    }
  },
  actions : {
  	getData(context){
    	axios.get('원하는 api 주소')
      	.then((a)=>{context.commit('setMore', a.data)})
    }
  }
})

export default store

4. 그리고 컴포넌트로 돌아와 버튼을 클릭하면 api에서 자료를 가져오는 이벤트를 만들어준다.
   dispatch라는 함수를 사용하고 방식은 $store.dispatch('actions에 만들어논 함수')이런 형태로 만들어주면 끝이다~~

<template>
	<h4> 나는 {{$store.state.firstname}} {{$store.state.lastname}} 입니다.<h4>
    <button @click='$store.commit('nameChange')' >버튼</button>
	<button @click='$store.dispatch('getData')' >더보기 </button>
</template>
  // 버튼 클릭시 나는 hyosung park 입니다.