[Vue] Vuex(2) - state 변경 (mutations, $store.commit())

 state 변경

 

state 변경은 store.js만 한다. state 이상이 생기면 store.js를 보자.

store.js

import { createStore } from 'vuex'

const store = createStore({
    state () {
        return {
            name : 'lee',
            age : 20
        }
    },
    mutations :{
        changeName(state){
            state.name = 'park'
        },
        changeAge(state, payload){
            //state.age++;
            state.age += data
        }
    }
})

export default store;

 

먼저 store.js에 state를 수정하기 위한 방법을 mutations에 함수 정의한다.

전달할 데이터를 App.vue에서 payload에 넣어서 받아오면 된다.

App.vue

<template>
  <p> {{ $store.state.name }} </p>
  <p> {{ $store.state.age }} </p>
  <button @click="$store.commit('changeName')">버튼</button>
  <button @click="$store.commit('changeAge', 10)">버튼</button>
</template>

수정하고 싶으면 store.js에 $store.commit(함수명) 부탁한다.

 

 응용 예제

 

인스타그램 좋아요를 구현해보자. 좋아요 수를 likes라는 숫자 state로 좋아요 클릭 여부를 likeClick 불리언 state로 한다.

store.js

import { createStore } from 'vuex'

const store = createStore({
    state () {
        return {
            likes : 30,
            likeClick : false,
        }
    },
    mutations :{
        instaLike(state){
            if(state.likeClick == false){
                state.likes++;
                state.likeClick = true;
            } else {
                state.likes--;
                state.likeClick = false;
            }
        },
    }
})

export default store;

 

그리고 vue파일에 적용시켜 준다.

<template>
  <div @click="$store.commit('instaLike')" :style="{ backgroundImage : `url(${instaData.postImage})`}"></div>
</template>