[Vue3] Vuex4 활용하기1 - mutations

1. 값을 저장 하기

   store.js 파일 내에서 state() 함수 안에 데이터를 객체 형식으로 저장을 한다.

 

  state(){
    return {
      name : 'kim',
      age: 20,
    }
  },

이 데이터를 App.vue 파일 안에서 '불러' 오도록 할것이다.

 

2. 값을 불러오기

<h1> vuex name : {{ $store.state.name }} </h1>

값을 불러와 출력할 때에는 $store 안에 있는 state 안에 있는 name 을 출력해달라고 정중하게 부탁하도록 한다. 

{{ 이중괄호 }} 를 써야 완성이다. 객체의 형식이므로 객체를 불러다 쓰는 방식을 그대로 사용한다.

 

출력 화면은 아래와 같다.  

 

2. 값을 수정하기(or) 값을 변경해서 다시 출력하기

 그런데 언제까지나 store 에 저장한 초기값만 불러다 출력할 수는 없는 노릇이다.

 우리는 이 초기값을 지지고 볶아서 구워 삶은 다음에 다시 출력하고 싶을 것이다.

 그것이. 월급쟁이의. 삶이니까.

 

 값을 수정하려면 vuex를 쓰기 전에는 해당 데이터를 활용하는 컴포넌트에 들어가서 함수를 만들었겠지만,

이제는 그 함수조차 store.js 안에서 선언해 줘야 하는 것이다.

이 함수들은 mutations안에 넣어서 사용하도록 한다. 

  state(){
    return {
      name : 'kim',
      age: 20,
    }
  },
  mutations: {
    함수() {
    },
    함수2() {
    },
  },

 

왜?

그것이 vuex. 사용법이니까.

 

나는 name안에 들어가있는 값을 버튼을 눌렀을 때 park으로 바꿀 것이며,

age 안에 들어가있는 값을 버튼을 눌렀을 때 100씩 늘어나도록 바꿀 것이다. 

 

2-1. 버튼 눌렀을 때 데이터 바꾸는 함수 만들기

    changeName(state) {
      state.name = 'park';
    },
    addAge(state, payload) {
      state.age += payload;
    },

   함수 안에 들어가는 파라미터는 보통 state로 통일 한다고 한다. 관습적인 것인가 보다. 

   state함수 안에 넣어놓았던 데이터 name을 불러오려면

   mutations 안에서 작성한 함수에서 파라미터로 받아와야 한다. 

   관습적으로 파라미터를 state로 통일 한다고 했으니

 

   name 값을 불러오려면 state.name 이라고 해야 한다.

   age 값을 불러오려면 state.age라고 해야겠지?

   

  age를 수정할 때에는 name을 수정할 때와는 조금 다른방식을 사용한다. 

  파라미터로 받아온 값 만큼만 더해줄 것이기 때문이다. 

  그래서 payload라는 파라미터를 새로 사용했다. 

 

   2-2. 컴포넌트에서 함수 불러오기

     다시 정중해질 시간이다. 

     mutations에 저장한 함수를 불러올 때에는 $store.commit('함수이름') 의 형태로 불러온다. 

     그런데 이 함수에 addAge처럼 파라미터를 두개 사용한 경우에는 

     $store.commit('함수이름', 파라미터값) 의 형태로 호출한다.

    <h1> vuex name : {{ $store.state.name }}</h1>
    <button @click="$store.commit('changeName')">버튼눌러서 store 수정해버리기</button>

    <h1> vuex age : {{ $store.state.age }}</h1>
    <button @click="$store.commit('addAge', 100)">버튼눌러서 백살 더먹기</button>

 

 

 

출력내용은 아래와 같다.