1 缓存形式说明
vue常使用的两种缓存策略,一种为vue的router中使用keep-alive,一种为使用vuex的store.两者对比见表格:
| 缓存策略 | router中使用keep-alive | vuex的store |
|---|---|---|
| 用法 | 个人博客 | 官方博客 |
| 优点 | 1.比较灵活;<br>2.基本不需学习 | 1.方便统一管理数据;<br>2.多个router之间传输数据十分方便; |
| 缺点 | 1.多个router之间数据传输较困难;<br>2.统一管理数据困难且效率低; | 1.页面内部与input等内容交互时不方便,像v-model这样的语法糖需要拆开;<br>2.需要一定的学习过程和良好的设计理念; |
| 适用场合 | 刚开始使用vue的新手(只需配置即可) | 更高效管理通用数据的情况;<br>建议通过模块化使vuex的耦合性降到最低; |
3 数据交互处理
以部门模块和需要选择部门的用户模块为例进行说明.
此处的数据交互问题包含两个问题:
- 在本地操作,当前模块的数据改变时(如增加部门),影响到另一模块的数据引用(此时再增加用户时选择的部门,如果只是单纯被缓存,则不会体现这种变化);
- 在本地操作,当前模块的数据改变时,影响另一个地点的数据引用;
问题二情景的自主实现必然需要后台的支持,更加复杂,本博客不予考虑.一般而言,这种情况建议用户直接刷新页面来解决问题二;
对于问题一,理论上可以仅通过前台实现自主产生影响,这里分别讲下两种缓存策略如何实现这种自主影响.
3.1 keep-alive缓存策略
由于keep-alive对于数据统一管理的不便性,难以有效率的查询出被影响模块的数据引用.且即使找出了被影响模块,也难以使用有效方法重新读取缓存数据.
基于此,可考虑将所有可能被影响到的数据在切换router时,均重新加载.
activated(){
//这里仅重新加载可能会被影响的数据
//reload code
},
这样会牺牲一定的效率,但除了时间,对于用户使用而言,并没有太不好的影响.
3.2 vuex的store数据管理
由于vuex的store内部数据都是相互交通,统一管理的,因此既容易检测到数据变化(数据变化需要经过mutations),也容易对被影响数据进行重新加载(有些场合甚至不需重新加载,即使加载也仅需加载一遍).
以此来看,vuex的store在处理数据交互问题上十分优秀.
