java和vue数据交互_vue两种常见缓存策略的数据交互处理方案

1 缓存形式说明

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

缓存策略

router中使用keep-alive

vuex的store

优点

1.比较灵活;
2.基本不需学习

1.方便统一管理数据;
2.多个router之间传输数据十分方便;

缺点

1.多个router之间数据传输较困难;
2.统一管理数据困难且效率低;

1.页面内部与input等内容交互时不方便,像v-model这样的语法糖需要拆开;
2.需要一定的学习过程和良好的设计理念;

适用场合

刚开始使用vue的新手(只需配置即可)

更高效管理通用数据的情况;
建议通过模块化使vuex的耦合性降到最低;

3 数据交互处理

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

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

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

在本地操作,当前模块的数据改变时,影响另一个地点的数据引用;

问题二情景的自主实现必然需要后台的支持,更加复杂,本博客不予考虑.一般而言,这种情况建议用户直接刷新页面来解决问题二;

对于问题一,理论上可以仅通过前台实现自主产生影响,这里分别讲下两种缓存策略如何实现这种自主影响.

3.1 keep-alive缓存策略

由于keep-alive对于数据统一管理的不便性,难以有效率的查询出被影响模块的数据引用.且即使找出了被影响模块,也难以使用有效方法重新读取缓存数据.

基于此,可考虑将所有可能被影响到的数据在切换router时,均重新加载.

activated(){

//这里仅重新加载可能会被影响的数据

//reload code

},

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

3.2 vuex的store数据管理

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

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