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网页制作特殊效果用随机数
May 22 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
什么是网络协议
2016/04/07 面试题
软件部经理岗位职责范本
2014/02/25 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
教师节联欢会主持词
2015/07/04 职场文书
《花钟》教学反思
2016/02/17 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android