props와 custom event로 데이터를 주고받는게 힘들 때
Vuex를 설치시 js파일 하나에 모든 데이터를 다 저장하게 되는데,
그러면 보든 컴포넌트들은 그 데이터를 직접꺼내서 수정이 가능하다.
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.데이터 로 사용하면된다.
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에 맡기자.
actions : {
데이터가져오기(){
axios.get('').then(()=>{
성공시 실행할 코드
})
}
}
이제 App.vue와 같은곳에서 $store.dispatch('데이터 가져오기')를 사용하면 진짜 데이터를 가져와준다.
그 데이터를 가져온 직후 그거로 state도 변경하고싶으면
actions : {
데이터가져오기(context){
axios.get('').then(()=>{
context.commit('mutations함수명')
})
}
}
위처럼 사용하면된다.
stae변경시에는 무조건 mutations함수를 만들어 사용해야한다.
또 mutations함수 사용시 commit()이라고 써야하는데 그걸 사용하기 위해서는 함수에 context라는 파라미터(자유작명) 하나 추가해주면 사용가능하다.
그 파라미터는 $store변수라고 생각하면된다.