Vuex的热更替你知道多少？

前言

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

实现

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

下面我们把它们分别引入，这里没有分割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').defaultconst newMutations = require('./mutations/mutations').defaultconst newGetters = require('./getters/getters').defaultstore.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 = falseVue.use(Vuex)
const store=createStore();new Vue({store,render: h => h(App)
}).$mount('#app')

结语

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

作者：Vam的金豆之路
主要领域：前端开发
我的微信：maomin9761
微信公众号：前端历劫之路

Vuex的热更替你知道多少？相关推荐

vue知识点总结 --- vuex热更替
修改state.mutations等配置时,不触发页面刷新 export default () => {const store = new Vuex.Store({state: defaultS ...
vuex--热更替配置
配置:webpack-dev-server --hot 文件:store.js import Vuex from 'vuex' import defaultState from './state/st ...
基于Vue,Vue-router,Vuex的简书网站模仿
在这个教程里面,我会通过一系列的代码和图片来学习怎么使用vue-router,以及vuex.本文假设读者手里有关于vue-router和Vuex的文档,并且对Vue-router和Vuex有一定的了解 ...
webpack----常规配置
webpack,用起来利器,学起来懵*,还变的快~~~ 做笔记,加深记忆. 作用: 代码转化文件压缩代码分割自动刷新代码校验核心概念: entry:入口 module:模块,webpack从 ...
【JavaScript面试题】面试题整理一
文章目录 1.说说你对对TS的理解 2.说说nextTick()及应用场景 3.Node中间件用过吗 4.说一下webpack热更新的原理 5.数组去重的方法 6.什么是promise? 7.浏览器缓 ...
mpvue 模板_使用mpvue创建项目以及总结
1.新建项目 # 全局安装 vue-cli $ npm install--global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvu ...
mutations vuex 调用_Vuex源码学习（六）action和mutation如何被调用的（前置准备篇）...
前言 Vuex源码系列不知不觉已经到了第六篇.前置的五篇分别如下: 长篇连载:Vuex源码学习(一)功能梳理长篇连载:Vuex源码学习(二)脉络梳理作为一个Web前端,你知道Vuex的instal ...
Vuex 2.0 源码分析
作者:滴滴公共前端团队 - 黄轶大家好,我叫黄轶,来自滴滴公共前端团队,我们团队最近写了一本书 --<Vue.js 权威指南>,内容丰富,由浅入深.不过有一些同学反馈说缺少 Vuex 的 ...
大热荒野敲开资本大门后，精致露营就留得住年轻人吗？
(图片来源于网络,具体出处见水印,侵删) 文 | 易不二来源 | 螳螂观察(ID:TanglangFin) 精致生活已经卷到户外了. 在今年最火热的露营话题里,低调奢华.岁月静好的精致露营风几乎&q ...

Vuex的热更替你知道多少？

前言

实现

结语

Vuex的热更替你知道多少？相关推荐

最新文章

热门文章