Vuex 핫 리로딩

1 개요

Vuex Hot Reloading

Vuex 핫 리로딩

• Vuex는 webpack의 핫 모듈 교체 API를 이용하여 개발 중에 변이(mutation), 모듈(module), 액션(aciton), getter의 핫 리로딩을 지원한다.
• Browserify에서 browserify-hmr 플러그인으로 사용할 수도 있다.

• 변이(mutation)와 모듈(module)의 경우, store.hotUpdate() API 메소드를 사용할 필요가 있다.

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'

Vue.use(Vuex)

const state = { ... }

const store = new Vuex.Store({
  state,
  mutations,
  modules: {
    a: moduleA
  }
})

if (module.hot) {
  // 액션과 변이를 핫 모듈로 받아 들인다.
  module.hot.accept(['./mutations', './modules/a'], () => {
    // 업데이트된 모듈은 babel 6 모듈 출력으로 인해
    // .default를 여기에 추가해야 한다.
    const newMutations = require('./mutations').default
    const newModuleA = require('./modules/a').default
    // 새로운 액션과 변이로 바꾼다.
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        a: newModuleA
      }
    })
  })
}<

• counter-hot 예제로 핫 리로드를 확인해보자.

2 동적 모듈 핫 리로딩

• 모듈을 독점적으로 사용하는 경우, require.context를 사용하여 모든 모듈을 동적으로 로드·핫 리로드할 수 있다.

store.js

import Vue from 'vue'
import Vuex from 'vuex'

// 전체 모듈 로드
function loadModules() {
  const context = require.context("./modules", false, /([a-z_]+)\.js$/i)

  const modules = context
    .keys()
    .map((key) => ({ key, name: key.match(/([a-z_]+)\.js$/i)[1] }))
    .reduce(
      (modules, { key, name }) => ({
        ...modules,
        [name]: context(key).default
      }),
      {}
    )

  return { context, modules }
}

const { context, modules } = loadModules()

Vue.use(Vuex)

const store = new Vuex.Store({
  modules
})

if (module.hot) {
  // 어느 모듈이든 변경되면 핫 리로드
  module.hot.accept(context.id, () => {
    const { modules } = loadModules()

    store.hotUpdate({
      modules
    })
  })
}

3 같이 보기

• 핫 리로딩

4 참고

• https://vuex.vuejs.org/kr/guide/hot-reload.html