依据官网使用 webpack 的 Hot Module Replacement API,Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。你也可以在 Browserify 中使用 browserify-hmr 插件。

对于 mutation 和模块,你需要使用 store.hotUpdate() 方法:

// 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) {
// 使 action 和 mutation 成为可热重载模块
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
}
})
})
}

vue热重载的更多相关文章

  1. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  2. webpack使用webpack-dev-middleware进行热重载

    新手,刚开始学习webpack,想使用webdevserver,但定制性太差,于是研究了一下使用webpack-dev-middleware进行指定. 根据文档https://www.npmjs.co ...

  3. webpack之带有可自动打开浏览器及热重载的基本配置

    什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并 ...

  4. KSFramework常见问题:Lua脚本热重载,内存状态数据丢失?

    Lua热重载 内存数据在重载后会丢失 KSFramework中,所有的UI Lua脚本是可以重载的.脚本中的一些内存数据,在重载后会丢失,比如: -- 记录一个UI界面被打开了多少次 function ...

  5. KSFramework:集成U3D热重载框架 - README

    KSFramework KEngine + SLua+ Framework = KSFramework KSFramework是一个整合KEngine.SLua的Unity 5开发框架,并为程序.美术 ...

  6. .Net 4.X 提前用上 .Net Core 的配置模式以及热重载配置

    1. 前言 在提倡微服务及 Serverless 越来越普及的当下,在 .Net Core 之前,.Net 应用的配置模式往往依赖于一个名为 web.config 的 XML 文件,耦合性高,而可扩展 ...

  7. Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览

    github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...

  8. vue 热加载问题

    今天是使用vue突然发现没有热加载功能了,然后网上查了一下,配置了一些东西,并没有什么用,然后发现电脑FQ影响 vue 热加载 关掉FQ软件就好了,具体原理我也不清

  9. lua热重载

    热重载,就是不重新开unity让代码的变化直接看出来,一般在开发时候使用 lua中通过require导入的文件,最终都存在package.loaded这个table中.require会判断是否文件已经 ...

随机推荐

  1. 转:目前为止最全的微信小程序项目实例

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  2. 【Linux 内核网络协议栈源码剖析】网络栈主要结构介绍(socket、sock、sk_buff,etc)

    原文:http://blog.csdn.net/wenqian1991/article/details/46700177 通过前面的分析,可以发现,网络协议栈中的数据处理,都是基于各类结构体,所有有关 ...

  3. JSP 与 ACTION 之间的跳转

    <script language="javascript">function delconfirm(url){ if(confirm("你确定要删除本条数据吗 ...

  4. I.MX6 mkuserimg.sh hacking

    /*********************************************************************** * I.MX6 mkuserimg.sh hackin ...

  5. 优化Laravel的分页LIMIT和OFFSET调用

    在分页系统中使用limit和offset是很常见的,它们通常也会和ORDER BY一起使用.索引对排序较有帮助,如果没有索引就需要大量的文件排序. 一个常见的问题是偏移量很大,比如查询使用了LIMIT ...

  6. bzoj4052

    gcd 跟那道cf题是一个原理... 每一时刻我们最多有log个gcd,那么我们用map存储每种gcd最左端,每次和新的数gcd就更新新的gcd的最左端,然后更新答案 #include<bits ...

  7. AutoMapper封装类

    /// <summary> /// AutoMapper扩展帮助类 /// </summary> public static class AutoMapperHelper { ...

  8. 基于《Hadoop权威指南 第三版》在Windows搭建Hadoop环境及运行第一个例子

    在Windows环境上搭建Hadoop环境需要安装jdk1.7或以上版本.有了jdk之后,就可以进行Hadoop的搭建. 首先下载所需要的包: 1. Hadoop包: hadoop-2.5.2.tar ...

  9. 微型ORM:PetaPoco 学习资料整理

    github地址:https://github.com/CollaboratingPlatypus/PetaPoco petapoco 实体中字段去掉关联(类似于EF中的NotMap) 微型ORM:P ...

  10. css覆盖select样式并添加小箭头

    .select { border-radius: 5px; border: 1px #F4A627 solid; -webkit-appearance: none;//清除默认样式 backgroun ...