Vue页面状态持久化是如何实现和管理的？
- 内容介绍
- 文章标签
- 相关推荐
本文共计510个文字，预计阅读时间需要3分钟。
目录：+ 代码：+ 补充：+ 总结：+ 需求：+ 左右表：组织树：选择某一节点后，进入详情页面，再返回时需保持选中状态。其他查询条件也需保持状态。思路：使用Vuex结合localStorage缓存数据。
目录
- 代码：
- 补充：
- 总结
需求：左树右表。组织树选中某一节点后，进入详情页面，再返回时需要保持选中。其他查询条件也需要保持状态。
思路：用vuex结合localStorage缓存数据。点击树节点或查询按钮时，将数据保存在vuex中，同时存在localStorage中；页面回退时，将存在localStorage中的数据放到vuex中，在页面代码中判断vuex中是否有我们存的数据，有则直接用，没有则默认初始数据。当页面导航路由跳转时再清除缓存的页面数据。
代码：
点击某树节点时，存下id至vuex中。
本文共计510个文字，预计阅读时间需要3分钟。
目录：+ 代码：+ 补充：+ 总结：+ 需求：+ 左右表：组织树：选择某一节点后，进入详情页面，再返回时需保持选中状态。其他查询条件也需保持状态。思路：使用Vuex结合localStorage缓存数据。
目录
- 代码：
- 补充：
- 总结
需求：左树右表。组织树选中某一节点后，进入详情页面，再返回时需要保持选中。其他查询条件也需要保持状态。
思路：用vuex结合localStorage缓存数据。点击树节点或查询按钮时，将数据保存在vuex中，同时存在localStorage中；页面回退时，将存在localStorage中的数据放到vuex中，在页面代码中判断vuex中是否有我们存的数据，有则直接用，没有则默认初始数据。当页面导航路由跳转时再清除缓存的页面数据。
代码：
点击某树节点时，存下id至vuex中。