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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
我的论坛源代码(三)
2006/10/09 PHP
实用函数3
2007/11/08 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP创建XML接口示例
2019/07/04 PHP
表单内同名元素的控制
2006/11/22 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
servlet面试题
2012/08/20 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
医学生个人求职信范文
2014/02/07 职场文书
《识字五》教学反思
2014/03/01 职场文书
贷款委托书范本
2014/04/08 职场文书
电工实训报告总结
2014/11/05 职场文书
通知函格式范文
2015/04/27 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
Django+Celery实现定时任务的示例
2021/06/23 Python