Vuex는 Vue에서 사용하는 상태관리 라이브러리이다.
React에서 사용했던 Redux와 비슷하다. 이것 역시 컴포넌트 간의 데이터 이동을 자유롭게 하기 위해 사용하는데, 사용법은 Redux와 비슷하다.
상태관리 라이브러리는 항상 공부하면서 느끼는 점이 크게 어렵지 않고 사용법이 미숙해서 잘 못다루는 느낌이다. 사용법을 정리하면서 외워볼 생각이다.
(설치 명령어 : npm install vuex --save
)
//store.js
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
}
},
})
export default store
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
firstname : 'hyosung',
lastname : 'kim',
age : '30'
}
},
})
export default store
$store.state.firstname
이런식으로 바인딩만 하면 된다. 따로 설치나 import 하지 않아도 어디서든 접근이 가능함. ㅇㅅㅇ<template>
<h4> 나는 {{$store.state.firstname}} {{$store.state.lastname}} 입니다.<h4>
</template>
// 나는 hyosung kim 입니다.
바인딩한 데이터에 이벤트를 줘서 변경하고 싶다면 store.js로 바꿔달라고 요청을 보내야한다.
직접적으로 바꾸는 것도 가능은 하지만 별로 좋은 방법은 아니기 때문에, 반드시 store.js로 요청하는 방식으로 코드를 만드는게 좋다.
만약 이름을 hyosung park 으로 바꾸고 싶다면?
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
firstname : 'hyosung',
lastname : 'kim',
age : '30'
}
},
mutations : {
nameChange(){
}
}
})
export default store
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
firstname : 'hyosung',
lastname : 'kim',
age : '30'
}
},
mutations : {
nameChange(state){
state.name = 'park';
}
}
})
export default store
$store.commit('mutations에서 만든 함수')
이렇게 작성하면 된다.<template>
<h4> 나는 {{$store.state.firstname}} {{$store.state.lastname}} 입니다.<h4>
<button @click='$store.commit('nameChange')' >버튼</button>
</template>
// 버튼 클릭시 나는 hyosung park 입니다.
컴포넌트 내에서 Axios를 사용해도 되지만, Vuex를 통해 데이터를 받아오면 저장한 후 어떤 컴포넌트에서든 쉽게 빼서 쓸수 있기 때문이 아닐까 하는 생각이 든다. 추가적으로 JWT토큰 같은것도 store에 저장해두고 사용해도 될거 같고... 아무튼 사용법은 아래와 같다.
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
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
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
$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 입니다.