Getter와 모듈

게터로 계산된 상태 만들기

게터 정의하기

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

다른 게터를 사용하는 게터

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

게터에 접근하기

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

메서드 방식 게터

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

mapGetters 도우미

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

모듈로 나누는 이유

모듈 정의하기

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

모듈 등록하기

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

모듈 네임스페이스 지정하기

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

네임스페이스가 지정된 모듈에 접근하기

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

간단히 확인하기

복습