vuex는 데이터를 주고받는 라이브러리임
지금 데이터를 전송할때 props, custom event,mitt 등등 …. 이렇게 귀찮게 계속 전달하고 그래야함
한번씩은 괜찮은디, 하위 하위 하위 이렇게 계층적 구조로 되어있으면 매우 귀찮아 진다
이럴때 vuex를 사용하면 됨
그냥 데이터를 한곳에서 박아넣는 JS파일이라고 생각하면 됨
이런식으로 모든 컴포넌트에서 데이터를 사용할수 있음
진작에 알려주지..ㅠㅠ;;
진짜 안쓸 이유가 없음
근데 지금까지 안알려준 이유?
코드가 좀 길기떄문
간단한 프로젝트는 props를 이용하고 좀 프로젝트까지 갈때 가보자
vuex 홈페이지에 보면 설치 방법이 나와있으니 터미널에서 설치 ㄱㄱ
❯ yarn add vuex@next --save저는 오류가 들나는 yarn이용했으니 참고~❤️
Vuex4 setting
vuex는 그냥 모든 컴포넌트가 쓸수 있는 데이터 저장용 JS 파일임
?
뭐해 JS파일 만들어
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
name : 'kim',
}
},
})
export default store응응… 맹들었엉
일반적으로 Store이라는 이름으로 만든다고 함
이전에 data 바인딩할때 데이터 저장한것 처럼
저런식으로 데이터 보관하면댐
근데 vuex에서는 데이터라는 이름보다는 state라는 이름으로 부른다
근데 main.js에 vuex를 등록해줘야 한다
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
let emitter = mitt();
let app = createApp(App)
app.config.globalProperties.emitter = emitter;
import store from './Store.js';
app.use(store).mount('#app');
main.js에 vuex 라이브러리를 이런식으로 등록해주면 댐
사실 그냥 vuex설치 방법임
그냥 Store라는 이름의 공유폴더를 만든거라고 생각하면 될듯
→모든 컴포넌트에서 직접 꺼내 쓸 수 있다.
vuex를 실제로 사용해보자!
app.vue에서 한번 데이터를 꺼내 써 보겠슴니다.
<h4> 안녕 {{ $store.state.name }}</h4>
$store.state.데이터이름
이런식으로 데이터를 가져오면 되는거임
<button @click="$store.state.name='박'"> 버튼 </button>데이터를 가져오는것 뿐만 아니라 데이터를 변경할수도 있다
이런식으로 버튼 누르면 이름이 바뀌기도 함
근데 사실 이렇게 바로 변경하면 안되긴하다고 함
stroe에 있는 데이터는 store안에서만 바꾸는게 국룰임
만약에 코드가 100만줄이면 store에서 오류 날때 그냥 store에서 해결할거를
100만줄을 다 뒤져야 한다.
vuex의 state를 수정하고 싶으면
- 미리 store.js에 수정방법을 정의해두고
- 그 방법을 컴포넌트에서 소환해서 수정해야함
느낀점
vuex는 정말 편하다
근데 프로젝트 단위로 갈때 사용하기를 바람
짧은 코드 일때는 그냥 props 이용하자
vuex의 state를 수정할때는 stroe.js 안에서 수정하자
