Vuex之热更新

最新推荐文章于 2025-06-05 14:02:17 发布

原创最新推荐文章于 2025-06-05 14:02:17 发布 · 638 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种在Vue应用中实现Vuex状态管理模块热更新的方法。通过利用Webpack的Hot Module Replacement特性，可以在开发环境中实时更新store的状态、mutations、actions及getters，而无需刷新页面。这种方式极大地提高了开发效率。

vuex 热更新

// store.js
import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'

const isDev = process.env.NODE_ENV === 'development'
export default () => {
  const store = new Vuex.Store({ // 不直接 export
    strict: isDev,
    state: defaultState,
    mutations,
    getters,
    actions
  })

  if (module.hot) { // 热更新
    module.hot.accept([
      './state/state',
      './mutations/mutations',
      './actions/actions',
      './getters/getters'
    ], () => {
      const newState = require('./state/state').default
      const newMutations = require('./mutations/mutations').default
      const newActions = require('./actions/actions').default
      const newGetters = require('./getters/getters').default

      store.hotUpdate({
        state: newState,
        mutations: newMutations,
        getters: newGetters,
        actions: newActions
      })
    })
  }

  return store
}