Vue.js Vuex

Vuex 사용이유

1. props와 custom event로 데이터를 주고받는게 힘들 때
   Vuex를 설치시 js파일 하나에 모든 데이터를 다 저장하게 되는데,
   그러면 보든 컴포넌트들은 그 데이터를 직접꺼내서 수정이 가능하다.

2. Vue파일과 데이터가 너무 많을 때
   Vuex라는 라이브러리를 '상태관리 라이브러리'라고 하는데
   name이라는 데이터를 수십만개의 컴포넌트에서 쓸 때 갑자기 요류가 나면 문제 위치를 모든 컴포넌트에서 찾아야 한다.
   Vuex를 사용하게 되면 한곳에서 그 데이터를 관리하기 때문에, 데이터를 수정하는 방법도 한 곳에서 관리해서 디버깅이 편리하다

때문에 프로젝트가 클 경우에는 필수로 적용한다.
https://vuex.vuejs.org/

설치

yarn add vuex@next --save

Vuex setting
src안에 store.js를 만들고 다음 코드 작성

import { createStore } from 'vuex'

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

main.js에 store 파일을 등록

import store from './store.js'
app.use(store).mount('#app')

이제부터 store.js에 저장한 데이터들은 모든 컴포넌트가 가져가서 사용할 수 있다.
데이터 저장은 store.js에 저장하고 출력시에는 vue파일에서 {{}}안에 $store.state.데이터 를 사용하면 된다. 함수나 mounted같은 곳에서 사용시 this.$store.state.데이터 로 사용하면된다.

vuex action

Vuex에서 state수정시 mutations함수를 만들어 수정한다.
가끔 서버에서 데이터를 가져와 수정하고싶을 때는
당연히 서버로 ajax요청을 보내면 되는데 이는 mutations에 직접적지 않고 actions항목에 적어야한다.

mutations함수들을 만들 때 내부에 ajax처럼 오래걸리는 코드를 적으면, 나중에 길게 코드를 짤 때 힘들어진다.

예를들어 차례로 name과 age데이터를 수정할때, name을 수정하고 그다음에 age를 수정하고싶다면,

name수정하는함수()
age수정하는함수()

이렇게 사용하면된다.

그런데 여기서 name수정함수를 3초이상이 걸리는 ajax요청을 담았다면,
age수정이 먼저 될 수도 있다. js에서는 오래걸리는 코드는(비동기식 처리를 지원하는 코드) 잠시 뒤로 미루고 다음줄부터 실행하는 경향이 있다.
이부분 때문에 나중에 의도치않은 에러가 생기며 코드가 길어질 수 있다.

그래서 state를 수정하는 mutations함수는 ajax가 아닌 순수 state변경만 하는 함수로 만들어두자
ajax는 actions에 맡기자.

action만들기

actions : {
  데이터가져오기(){
    axios.get('').then(()=>{ 
      성공시 실행할 코드 
    })
  }
}

이제 App.vue와 같은곳에서 $store.dispatch('데이터 가져오기')를 사용하면 진짜 데이터를 가져와준다.

그 데이터를 가져온 직후 그거로 state도 변경하고싶으면

actions : {
  데이터가져오기(context){
    axios.get('').then(()=>{ 
      context.commit('mutations함수명') 
    })
  }
}

위처럼 사용하면된다.
stae변경시에는 무조건 mutations함수를 만들어 사용해야한다.
또 mutations함수 사용시 commit()이라고 써야하는데 그걸 사용하기 위해서는 함수에 context라는 파라미터(자유작명) 하나 추가해주면 사용가능하다.
그 파라미터는 $store변수라고 생각하면된다.