Vuex 러닝 가이드북

뮤테이션

setBooks 추가

books 상태(state)를 업데이트 하는 setBooks 뮤테이션을 추가합니다.

NOTE

Vuex 스토어의 뮤테이션(mutations)은 Vue 컴포넌트의 메소드(methods)와 유사합니다.








 
 
 



// store/index.js

new Vuex.Store({
  state: {
    books: []
  },
  mutations: {
    setBooks(state, books) {
      state.books = books
    }
  }
})

NOTE

뮤테이션 메서드는 첫번째 인자로 상태(state)를 전달 받고, 뒤이어 페이로드(payload)를 전달 받습니다.

용어 설명
state 기억되는 시스템의 상태
payload 전송되는 데이터

상태 업데이트

BookList.vue 파일의 로직 코드를 다음과 같이 수정합니다.

  1. store 객체를 임포트 합니다.
  2. books 데이터를 페이로드로 전달하는 setBooks 뮤테이션을 커밋(commit) 합니다.
  3. state.books 상태가 업데이트 되면 컴포넌트 속성 books가 계산되도록 설정합니다.



 





 




 




// components/BookList.vue

import shop from "../api/shop";
import store from "@/store"; // [1]

export default {
  name: "BookList",
  computed: {
    books() {
      return store.state.books; // [3]
    }
  },
  created() {
    shop.getBooks(books => {
      store.commit("setBooks", books); // [2]
    });
  }
}

NOTE

뮤테이션을 실행할 때, 스토어 객체의 커밋 메서드를 사용합니다.

store.commit('뮤테이션_이름', 페이로드)

개발도구 Vuex 확인

Vue Devtools 개발도구의 Vuex 탭을 선택하면 초기 상태(Base State)와 setBooks 뮤테이션이 처리한 결과가 기록됨을 확인할 수 있습니다. 초기 상태에서는 state.books 데이터가 빈 배열이었지만, setBooks 뮤테이션이 실행된 후에는 데이터가 채워집니다.

← 게터 →