Vuex 2 : store에 있는 state 데이터 바꾸는 법
이번 시간에는 저번에 state 데이터를 수정할때 직접적으로 접근하면 안된다고 했었다
그래서 어떻게 수정하는디;;
ㅇㅇ 오늘 배울거임 수정하는 방법
ㄱㄱ
<h4> 안녕 {{ $store.state.name }}</h4>
<button @click="$store.state.name='박'"> 버튼 </button>지난 시간에는 이런식으로 코드를 짯음
온 클릭 버튼 달아서 버튼 누르면 state가 박으로 바뀌는 직접접근 방식으로 했었다
근데 이제는 store.js에 바꿔달라고 요청하는 형식으로 할거임
Vuex로 데이터 수정
const store = createStore({
state(){
return {
name : 'kim',
}
},
})현재는 state가 kim → park 으로 변경한다고 해보자
- store.js에 state 수정방법 정의
- 수정하고 싶으면 store.js에 부탁
1. store.js에 state 수정방법 정의
//store.js
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
name : 'kim',
age : 20
}
},
mutations : {
이름변경(state){
state.name = 'park'
}
},
})
export default storestore.js 파일로 가서 mutation에 정의를 해야한다
근데 그냥 name = park 이런식으로 재정의는 못하고
state 라는 파라미터를 달아서 state.name = 'park' 이런식으로 재정의 하면된다.
2. 수정하고 싶으면 store.js에 부탁
이제 app.vue에서 store.js에 변경 요청만 하면된다.
<h4> 안녕 {{ $store.state.name }}</h4>
<button @click="$store.commit('이름변경')"> 버튼 </button>이름변경에는 함수의 이름을 적어주면 된다.
응응 버튼 누르면 잘 요청됨
그래서 왜 사용하는디
stae 변경은 stroe.js만 하기도 하고 이제 state 상태에 대한 오류는 store.js 코드에서만 뒤지면 댐
예제 : age
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
name : 'kim',
age : 20
}
},
mutations : {
이름변경(state){
state.name = 'park'
}
},
})
export default storestore.js에서 age state를 맹들어 봅시다.
- app.vue에서 age가 데이터 바인딩 되게 하기
- 버튼을 만들고 누르면 age가 +1되게 하기
app.vue에서 age가 데이터 바인딩 되게 하기
//app.vue
<p> 이제 반오십이다. {{ $store.state.age }} </p>
<button @click="$store.commit('나이증가')"> 누르지마 </button>//store.js
import { createStore } from 'vuex'
const store = createStore({
state(){
return {
name : 'kim',
age : 25
}
},
mutations : {
이름변경(state){
state.name = 'park'
},
나이증가(state){
state.age++;
}
},
})
export default store
응응… 위에 있는 방법으로 그대로 하면된다.
Q. 버튼 누를때 원하는 만큼 ++를 해주고 싶다면?
<p> 이제 반오십이다. {{ $store.state.age }} </p>
<button @click="$store.commit('나이증가',10)"> 누르지마 </button>이런식으로 데이터의 크기를 원하는식으로 붙혀서도 보낼수 있다.
근데 store.js에서 조금 수정 해줘야함
나이증가(state, payload){
state.age += payload;
}
},이런식으로 파라미터를 하나 더 붙혀주고 식을 알맞게 수정하면 되는거임ㅋ
이런식으로 10씩 증가하게 됨
예제 : 좋아요 기능 만들기
메인 화면에서 사진을 클릭하면 좋아요 개수가 +1 되는식으로 하고 싶음
state(){
return {
name : 'kim',
age : 25,
likes : 30,
}
},일단 state를 30으로 박아두고 첫번째 게시물에 데이터 바인딩을 진행 해볼거임
순서는 이런식으로 될것 같음
- 데이터 바인딩
- 온클릭으로 사진누르면 likes ++ 되기
- store에 함수 등록하기
데이터 바인딩
<template>
<div class="post">
<div class="post-header">
<div class="profile" style="background-image: url();"></div>
<span class="profile-name">{{게시물.name}}</span>
</div>
<div class="post-body" :style="{backgroundImage : `url(${게시물.postImage})` }"></div>
<div class="post-content">
<p>{{ $store.state.age }} Likes </p>
<p><strong>{{게시물.name}}</strong> {{게시물.content}}</p>
<p class="date">May 15</p>
</div>
</div>
</template>실질적으로 좋아요 기능이 있는 부분은 post.vue이다.
이전에는 데이터를 가져와서 넣는 형식이였는데
vuex를 통해서 기능을 구현해야하니
{{ $store.state.age }}
같은 형식으로 데이터를 바인딩 해야한다.
일차적으로 데이터 박는거는 성공
온클릭 부착후 like++
<div @click="$store.commit('좋아요증가')" class="post-body" :style="{backgroundImage : `url(${게시물.postImage})` }"></div>온클릭을 부착후 커밋을 통해 store에 요청을 하자
store에 함수 등록하기
이제 요청까지 했으니 좋아요 증가를 정의 해야한다.
바로 store에 가서 정의 ㄱㄱ
좋아요증가(state){
state.likes++;
}그냥 좋아요 ++ 되게 하면댐
이런식으로 50개까지 누름ㅋ
잘되네용
근데 사진을 첫번째 누를때는 +1 되지만 두번 누르면 -1 되게 해보장
state(){
return {
name : 'kim',
age : 25,
likes : 30,
좋아요눌렀니 : false,
}
},
mutations : {
좋아요증가(state){
if(state.좋아요눌렀니 == false){
state.likes++;
state.좋아요눌렀니 = true;
}
else{
state.likes--;
state.좋아요눌렀니 = false;
}
}이런식으로 좋아요를 판별하는 데이터를 하나 생성해주고 조건문에 따라서 상태를 바꿔주면댐
30에서 1오르고 두번 누르면 깍임
3개 사진 모두 개별적으로 좋아요 카운트
모든 사진에 좋아요 기능을 개발하고 싶으면 어떻게합니까.
지금은 사진 하나만 동작하는데 말입니다.
당연히 모든 사진에 대해서 "이 사진 좋아요 눌렀냐" 라는 데이터를 어딘가에 저장해둬야합니다.
사진이 3개면 [false, false, false] 이런 array 같은거 써도 되겠군요.
물론 게시물 정보 전부를 Vuex로 옮겨와서 거기다가 기록하는게 가장 좋은 방법입니다.
데이터를 찢어놓는 것 보다 한 곳에 모아놓는게 좋죠.
