vuex 闲置状态重置方案
前言
大型单页应用(后面都是指spa),我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题。这种应用少则几十个单页,多则上百个单页。随着路由的频繁切换,每个路由对应的 vuex 中的状态将越来越多。为了做到页面的极致优化,我们需要将那些闲置的状态重置,以减小占用的内存空间。
什么状态可以重置
vuex 强调采用集中式存储管理应用的所有组件的状态,但是我们真把所有的状态都放到 store 中去处理,你会发现开发起来非常痛苦。这里如果想很好的把控哪些数据需要放到 store 中去管理,首先要理解 vuex 是用来解决什么问题的。vuex 官网指出是为了解决多个组件共享状态的,那么我们就可以把多个组件的共享状态放到 store 中去管理,这里的多组件共享对于单页应用很多情况是跨路由的组件。如果 store只存储多组件共享的状态,那么我们就没必要去清理 vuex 中的状态了,因为这些状态随时会被用到。
而随着业务场景越来越复杂,很多与后台交互的逻辑也都放到了组件中,这样代码就变得很凌乱,vuex 也没有被充分利用。这时我们可以把与后台 api 交互的逻辑放到 vuex 中的action 去处理,后台返回的状态自然也就放到了 store 管理。这样处理后,组件就只负责对数据进行渲染,逻辑非常清晰。而此时,组件对应的 store 中的状态随着路由的切换将会越来越多,而这些状态就需要我们手动的去清理了。
很多方案都有取舍,如果将与后台 api 交互的数据放到组件中,就没必要去清理了,但是代码逻辑将变得比较乱。另外诸如 vuex 的插件 vue-devtools 将无法监控到每次请求数据的变化...
什么时候去重置状态
我们想要的效果是在路由切换的时候,把上一个路由对应的 vuex 中的状态重置掉,但是路由和vuex 并没有一一对应的关系,如果要做到这种效果,那么我们需要维护一个路由与vuex 模块的对应关系,这样会很繁琐。不如当路由改变时去重置 vuex 中的所有状态。
vuex 中闲置状态如何清理
下面将结合我的github实例去说明,这个实例创建了一个单页应用,我们通过切换路由的时候将闲置的状态清除。
改造路由对应组件的 module 状态
实例中采用拆分 store 为多个 module 的方式,将路由对应的组件状态放到对应的 module 中,多组件共享的状态放到顶级的 store 中管理。大致如下:
// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";
export default new Vuex.Store({
state,
getters,
actions,
mutations,
modules: { // 每个路由对应的 module
page1,
page2,
page3,
page4,
page5
},
plugins: __DEV__ ? [createLogger()] : [],
strict: __DEV__ ? true : false
});
路由 page1 对应的 module 的 state 形如:
// store/modules/page1.js
const state = {
// 列表数据
page1Data: [],
// 标题数据
page1Title: ''
}
这些数据是通过调用后端 api 返回并复制的数据,如果我们在路由改变的时候重置这些数据,那么需要将初始化数据提取出来,并且暴露一个需要重置的标识方法 initState()
,代表路由改变的时候需要重置,当然这个方法名称是个约定,你也可以定义为其他名称。改造后为:
// store/modules/page1.js
// 放置你要重置的数据
const initState = {
page1Data: [],
}
// state
const state = {
// 参数解构
...initState,
// 路由改变不想重置的数据
page1Title: '',
initState(){
return initState
}
}
全局 module 配置
定义全局 mutation 事件类型
// store/types.js
export const RESET_STATES = 'resetStates'
定义全局 mutation
// store/mutation.js
import * as types from './types'
// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {
const mState = state[moduleState];
if (mState.initState && typeof mState.initState === 'function') {
const initState = mState.initState();
for (const key in initState) {
mState[key] = initState[key];
}
}
}
export default {
[types.RESET_STATES](state, payload) {
for (const moduleState in state) {
resetState(state, moduleState);
}
},
}
定义全局 action
// store/action.js
import * as types from './types'
export default {
// rest state action
resetStates:function (context, payLoad) {
context.commit(types.RESET_STATES, payLoad);
}
}
路由切换触发重置方法
至此一切准备就绪,只需要在路由改变时触发重置的方法即可,在入口 vue 文件中处理
// components/app.vue
<script>
import {mapState, mapActions} from "vuex"
export default{
methods: {
...mapActions({
resetStates: "resetStates"
})
},
watch: {
$route(to, from) {
// 路由改变发起重置
this.resetStates();
}
}
}
</script>
如果你的 chrome 浏览器安装了 vuejs-devtools 在路由切换的时候就能够很清晰的看到上一个路由数据的的重置过程。
总结
实例点这里。我们这里的 vuex 状态重置,是每次路由切换遍历所有的 store 中的状态,并把initState()
中的属性重置,如果能做到把当前的路由对应的 state 重置就更好了,但是路由和 store 中的 module 并没有关联关系。这里只是提供一种重置 vuex 状态的一种方案,如果有更好方案还请各位看官留言。如有不妥的地方也欢迎拍砖留言。
--完--
原文地址:https://segmentfault.com/a/1190000012686781
vuex 闲置状态重置方案的更多相关文章
- Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案
近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...
- vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制)
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- vuex 改变状态值得命名问题
今天在做vuex的状态的时候 发现了个奇葩的问题,后面解决了,在改变状态的值得时候 传值的名称 不要和定义的状态的名称值相同,要不然会报错,如图所示 也就是password的名称不能相同,要不监测不到 ...
- (转)flutter 新状态管理方案 Provide (一)-使用
flutter 新状态管理方案 Provide (一)-使用 版权声明:本文为博主原创文章,基于CC4.0协议,首发于https://kikt.top ,同步发于csdn,转载必须注明出处! ...
- Vuex 单状态库 与 多模块状态库
之前对 Vuex 进行了简单的了解.近期在做 Vue 项目的同时重新学习了 Vuex .本篇博文主要总结一下 Vuex 单状态库和多模块 modules 的两类使用场景. 本篇所有代码是基于 Vue- ...
- 借鉴redux,实现一个react状态管理方案
react状态管理方案有很多,其中最简单的最常用的是redux. redux实现 redux做状态管理,是利用reducer和action实现的state的更新. 如果想要用redux,需要几个步骤 ...
- Leetcode题目46.全排列(回溯+深度优先遍历+状态重置-中等)
题目描述: 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], ...
- Vuex state 状态浅解
对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...
随机推荐
- Combobox下拉框两级联动
下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...
- Creating a Custom Page Layout in SharePoint 2013
Creating a Custom Page Layout in SharePoint 2013 In my last article, I documented how to create a Ma ...
- C++12.1.4 类的前向声明、不完全类型类
只声明却没有定义的类称为—————–不完全类型,不完全类型不能定义该类型的对象,只能用于定义指向该类型的指针及引用,或者用于声明(不是定义)使用该类型作为形参类型或返回类型的函数. 在创建类的对象之前 ...
- HDU-2087 剪花布条 字符串问题 KMP算法 查匹配子串
题目链接:https://cn.vjudge.net/problem/HDU-2087 题意 中文题咯 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条, ...
- unity Android在streamingAssets路径下文件无法读取的的解决方法
unity Android在streamingAssets路径下文件,有时候plugin下的.jar或者.so无法直接读取: 解决方法之一,拷贝至其他路径: #if UNITY_ANDROID str ...
- hadoop-13-root ssh无密码登陆
hadoop-13-root ssh无密码登陆 生产机器禁止ROOT远程SSH登录: vi /etc/ssh/sshd_config 把 PermitRootLogin yes 改为 PermitRo ...
- Qt 5.3 下OpenCV 2.4.11 开发(5)最高效的像素引用
OpenCV 提供一个函数 getTickCount() ,能够用来測量一段代码的执行时间.另一个函数 getTickFrequency() 用来返回每秒内的时钟周期.代码操作例如以下: double ...
- ZOJ2326Tangled in Cables(最小生成树)
Tangled in Cables Time Limit: 2 Seconds Memory Limit: 65536 KB You are the owner of SmallCableC ...
- .NET 框架简单介绍
初学.NET肯定会有一系列的疑问,比方(下面为自己的疑问): 1) 何为. NET框架.它都包括哪些东西? 2) 程序集是什么.它是怎样在CLR(通用语言执行时)中执行的? 3) C#与VB.NET同 ...
- hive安装用mysql作为元数据库,mysql的设置
mysql的设置 在要作为元数据库的mysql服务器上建立hive数据库: #建立数据库 create database if not exists hive; #设置远程登录的权限 GRANT AL ...