浅谈vuex 闲置状态重置方案


Posted in Javascript onJanuary 04, 2018

前言

大型单页应用(后面都是指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 状态的一种方案,如果有更好方案还请各位看官留言。如有不妥的地方也欢迎拍砖留言。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
JavaScript基本编码模式小结
May 23 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
详解原生js实现offset方法
Jun 15 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
详解Angular5 服务端渲染实战
Jan 04 #Javascript
JavaScript中的高级函数
Jan 04 #Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 #Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 #Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 #Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 #Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 #Javascript
You might like
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
PHP的反射机制实例详解
2017/03/29 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python基础知识点 初识Python.md
2019/05/14 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
服装电子商务创业计划书
2014/01/30 职场文书
公司周年庆典标语
2014/10/07 职场文书
骨干教师个人总结
2015/02/11 职场文书
山楂树之恋观后感
2015/06/11 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python