μŠ€ν† μ–΄ λͺ¨λ“ˆν™”

μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— μŠ€ν† μ–΄λ₯Ό μ μš©ν•΄μ„œ μ‚¬μš©ν•˜λ‹€κ°€ 보면 금방 μŠ€ν† μ–΄μ˜ 덩어리가 μ»€μ§‘λ‹ˆλ‹€. κ·ΈλŸ΄λ•Œ 데이터(μƒνƒœ)의 μ„±κ²©λ³„λ‘œ μŠ€ν† μ–΄λ₯Ό λͺ¨λ“ˆν™” ν•΄μ£Όλ©΄ 훨씬 κ΄€λ¦¬ν•˜κΈ°κ°€ μˆ˜μ›”ν•©λ‹ˆλ‹€.

μŠ€ν† μ–΄ λͺ¨λ“ˆν™” μ½”λ“œ ν˜•μ‹

μŠ€ν† μ–΄λ₯Ό λͺ¨λ“ˆν™” ν•˜λŠ” μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

new Vuex.Store({
  modules: {
    λͺ¨λ“ˆ λͺ…: λͺ¨λ“ˆμ˜ λ‚΄μš©
  }
})

μŠ€ν† μ–΄ λͺ¨λ“ˆν™” μ˜ˆμ‹œ

μ–΄λŠ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄λ“ μ§€ 인증은 거의 ν•„μˆ˜λ‘œ μ‘΄μž¬ν•©λ‹ˆλ‹€. 그러면 μ‚¬μš©μžμ˜ 인증 정보(auth)와 μƒν’ˆ 정보(product)λ₯Ό 각각 λͺ¨λ“ˆλ‘œ λΆ„ν• ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. μŠ€ν† μ–΄μ˜ μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

// store.js
import auth from './modules/auth/index.js';
import product from './modules/product/index.js';

new Vuex.Store({
  modules: {
    auth: auth,
    product: product
  }
})

μœ„μ—μ„œ μž„ν¬νŠΈν•˜λŠ” auth와 product λͺ¨λ“ˆμ˜ λ‚΄μš©μ€ μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

// auth.js, product.js
import state from './state.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';

export default {
  namespaced: true,
  state: state,
  getters: getters,
  mutations: mutations,
  actions: actions
}

λ·°μ—‘μŠ€ λͺ¨λ“ˆν™”μ˜ 핡심은 ES6의 modules ꡬ문을 잘 μ΄ν•΄ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. 그리고 각 λͺ¨λ“ˆλ“€μ˜ 속성λͺ…이 μœ μΌν•˜λ„λ‘ namespaced: trueλ₯Ό κΌ­ μΆ”κ°€ν•΄μ€˜μ•Ό ν•©λ‹ˆλ‹€.