Vuex的热更替如何实现


Posted in Javascript onJune 05, 2020

前言

我们在使用Vuex的时候,会时不时的更改Vuex内的数据,但是页面不会随之更新,如果数据量大,一个数据依赖另一个数据的话,这样我们要是再刷新页面的话会把以前依赖的数据清空,效率特别低。所以,今天我总结了怎么实现Vuex热更替的功能。

实现

首先,我们这里使用了Vue CLI3。在根目录下的src目录下我们有一个存放Vuex的文件夹叫做store文件夹。首先我们分割成几个模块。

Vuex的热更替如何实现

下面我们把它们分别引入,这里没有分割actions,不过与其他属性同理,这里有不做介绍。下面我们在index.js编辑下面代码:

import Vuex from 'vuex'
// 引入分割的模块
import state from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'

export default ()=>{
// 这里需要赋给一个store变量
 const store = new Vuex.Store({
  state:state,
  mutations:mutations,
  getters:getters
 })
 // 热更新模块
 if(module.hot){
 // 跟上面一样,写入对应的分割模块路径
  module.hot.accept([
   './state/state',
   './mutations/mutations',
   './getters/getters'
  ],()=>{
  // 开启热更替
   const newState = require('./state/state').default
   const newMutations = require('./mutations/mutations').default
   const newGetters = require('./getters/getters').default
   store.hotUpdate({
    state:newState,
    mutations:newMutations,
    getters:newGetters
   })
  })
 }
 
 return store
}

我们还需要在main.js修改:

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import createStore from './store/index.js'

Vue.config.productionTip = false

Vue.use(Vuex)
const store=createStore();

new Vue({
 store,
 render: h => h(App)
}).$mount('#app')

一些其他api

// store.registerModule({ //动态添加模块
// })

// 相当于getter
// store.watch((state)=>state.count+1,(newCount)=>{
//  console.log('new count watched , '+newCount)
// })

// mutation被调用时
// store.subscribe((mutation,state)=>{
//  console.log(mutation.type)
//  console.log(mutation.payload)
// })

// action被调用时
// store.subscribeAction((action,state)=>{
//  console.log(action.type)
//  console.log(action.payload)
// })

结语

以上就完成了Vuex的热更替功能。需要注意的是,直接在state中更改是看不到效果的哦!

到此这篇关于Vuex的热更替如何实现的文章就介绍到这了,更多相关Vuex 热更替内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
vue 如何使用递归组件
Oct 23 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 #Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 #Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 #Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 #Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 #Javascript
JS删除数组指定值常用方法详解
Jun 04 #Javascript
Vue项目接入Paypal实现示例详解
Jun 04 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
php读取xml实例代码
2010/01/28 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python中使用中文的方法
2011/02/19 Python
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
介绍下WebSphere的安全性
2013/01/31 面试题
装修致歉信
2014/01/15 职场文书
汽车广告策划方案
2014/05/31 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
党的群众路线调研报告
2014/11/03 职场文书
社会实践活动总结格式
2015/05/11 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript