开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

现在的状态管理机制是非常健全的，但是我们在使用的时候如果不注意的话还是难免会踩到坑，所以今天介绍下坑的地点是在哪，以及如何应对这些坑。

坑一

场景1：在A页面打开了树的某个节点缓存了树节点的一些内容，随后进行编辑，但是此时编辑完你并没有保存。接着你打开B页面，同样的B页面在打开时也进行了一个缓存，此时A页面和B页面用的是同一个key，编辑完B页面进行了保存，回到A页面你也进行了保存。

结果：在保存时调用了缓存数据，B页面保存时是用的B页面的缓存数据，A页面在把保存时同样是用的B页面的数据，这样就导致A页面传参出现了错误。

场景2：在项目的首页缓存了某一数据，方便后续的页面的使用，但是后来我们在项目迭代的时候，接口返回的数据更新了，导致我们还是利用的缓存数据，所以需要我们进行一次手动的刷新。

结果：我们每次项目的更新迭代在浏览器页面我们都需要进行一次缓存的清空，对于开发人员这是能知道的，比较轻松办到的，但是对于普通用户呢，就是一遍遍的来询问，是不是还没修复好或者是更新没成功。

对于场景一而言，解决方法是比较简单的，常见的解决方案有两种：

方案1：

在缓存时，对于不同的页面使用不同的key,这样保证key值的唯一性，就不会造成数据的取值混乱问题。但是这个是比较麻烦的，而且比较消耗内存，不是很推荐。

方案2： 页面的缓存不一定非要用sessio local 这样的方式，同样可以通过路由来保存数据，在进入新的页面时，带入特定的key值，在用的时候通过$route.query.xxx这种形式来取值就行。

对于场景二而言，解决方法也是有的最简单的方式就是添加标识。

举个例子：

我们在对于有权限的项目做处理时，一旦用户在某个时间点身份信息过期时我们会进行提醒，并且会自动的跳转到登录页，所以我们可以通过类似的方式进行添加一个标识去更新我们的缓存。

方案1： 在项目的初始页面添加一个标识，每当打开页面时就进行一个判定，根据标识的true与false来决定更新与否，这样我们就能避免因缓存造成的数据错误。