Vuex 기초공사 - WastepaperBasket/Vue.js GitHub Wiki
1. props와 custom event로 데이터 주고받는게 힘들면 씁니다.
왜냐면 Vuex를 설치하면 js 파일하나에다가 모든 데이터를 다 저장할 수 있습니다.
그럼 모든 컴포넌트들은 그 데이터를 직접 꺼내쓰고 수정할 수 있습니다.
이제 props 그딴거 필요없이 모든 컴포넌트가 데이터에 직접 접근가능합니다.
2. Vue파일과 데이터가 너무 많으면 씁니다.
왜냐면 Vuex 라는 라이브러리를 상태관리 (데이터관리) 라이브러리라고 하는데
예를 들어 name이라는 데이터를 컴포넌트 100만개에서 쓰고 있는데
갑자기 삑나면 어디서 삑났는지 name을 쓰는 곳 100개를 다 뒤져야할텐데..
근데 Vuex를 쓰면 데이터를 한 곳에서 관리해주기 때문에,
데이터 수정하는 방법도 한 곳에서 관리하기 때문에 디버깅이 쉽습니다.
그래서 큰 프로젝트 만들 땐 필수입니다.
- src안에 아무데나 store.js
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
name : "Vuex"
}
},
})
export default store
- main.js
(main.js에 추가하셈)
import store from './store.js'
app.use(store).mount('#app')
- 사용법
<h1>{{ $store.state.name }}</h1>
<button @click="$store.state.name = '박'">버튼</button>
<!-- 직접 변경은 비추.. -->
100개의 Vue 파일에서 name : 'kim'을 수정한다고 칩시다.
근데 개발하다가 갑자기 'kim'이 아니라 123 이라는 숫자가 되어버리는 버그가 발생한겁니다.
그럼 대체 어떤 컴포넌트를 ?
100개를 다 뒤져야한다!
이 불상사를 방지하기 위해서
state 수정은 store.js만 할 수 있게 코드를 짜놓는게 좋다.
const store = createStore({
state () {
return {
name : 'kim',
age : 20,
}
},
mutations :{
나이먹기(state){
state.age++
}
},
}
- store.js에 부탁하기
(App.vue)
<button @click="$store.commit('한살더하기')">버튼</button>
당연히 서버로 ajax 요청을 날리면 되는데
그런건 mutations에 직접 적지 않고 actions라는 항목에 적으셔야합니다.
- actions 만드는 법
actions : {
데이터가져오기(){
axios.get('').then(()=>{
성공시 실행할 코드
})
}
}
- 가져온 직후에 그걸로 state 변경?
actions : {
데이터가져오기(context){
axios.get('').then(()=>{
context.commit('mutations함수명')
})
}
}
computed : {
now2(){
return new Date()
}
},
methods : {
now(){
return new Date()
}
}
-
methods 안에 만든 함수는 함수를 부를 때마다 안의 코드가 실행됨
-
computed 안에 만든 함수는 함수를 불러도 안의 코드가 실행안됨 계산결과 저장공간
computed : {
name(){
return this.$store.state.name
}
}
import {mapState, mapMutations} from 'vuex'
computed : {
...mapState(['state이름1', 'state이름2']),
...mapMutations([ '좋아요', 'setMore' ])
}
- methods 함수는 사용할 때마다 실행됨.
- computed 함수는 사용해도 실행되지 않습니다.
+ 처음 실행하고 값을 간직함
+ 계산 결과 저장용 함수들임
+ () 쓰면안됨!!
+ 필요할 때만 실행됨
+ 일종의 함수라기 보단 데이터 계산 결과 함수임
mapState 쓰면 state꺼내쓰는 코드 짧아짐!
computed: {
now2() {
return new Date();
},
name() {
return this.$store.state.name;
},
...mapState(['name','age','likes']),
},
쓸때는 ? {{name}} 요런식.. 갸꿀
단, computed 함수는 return 은 꼭 있어야함.
너무 긴데 축약은?
import { mapState } from 'vuex'; 임포트 하고,
...mapState(['state이름','age','likes']),
꺼내쓰려면 {{likes}} 동일함!!
...mapState([{작명: 'name'}])
함수를 commit 말고 다른걸쓰려고하면
methods안에다 mapMutations
...mapMutations(['함수명','좋아요']),