1 缓存形式说明

vue常使用的两种缓存策略,一种为vue的router中使用keep-alive,一种为使用vuex的store.两者对比见表格:

3 数据交互处理

以部门模块和需要选择部门的用户模块为例进行说明.

此处的数据交互问题包含两个问题:

1. 在本地操作,当前模块的数据改变时(如增加部门),影响到另一模块的数据引用(此时再增加用户时选择的部门,如果只是单纯被缓存,则不会体现这种变化);
2. 在本地操作,当前模块的数据改变时,影响另一个地点的数据引用;

问题二情景的自主实现必然需要后台的支持,更加复杂,本博客不予考虑.一般而言,这种情况建议用户直接刷新页面来解决问题二;
对于问题一,理论上可以仅通过前台实现自主产生影响,这里分别讲下两种缓存策略如何实现这种自主影响.

3.1 keep-alive缓存策略

由于keep-alive对于数据统一管理的不便性,难以有效率的查询出被影响模块的数据引用.且即使找出了被影响模块,也难以使用有效方法重新读取缓存数据.
基于此,可考虑将所有可能被影响到的数据在切换router时,均重新加载.

activated(){
    //这里仅重新加载可能会被影响的数据
    //reload code
},

这样会牺牲一定的效率,但除了时间,对于用户使用而言,并没有太不好的影响.

3.2 vuex的store数据管理

由于vuex的store内部数据都是相互交通,统一管理的,因此既容易检测到数据变化(数据变化需要经过mutations),也容易对被影响数据进行重新加载(有些场合甚至不需重新加载,即使加载也仅需加载一遍).

以此来看,vuex的store在处理数据交互问题上十分优秀.