<script> import {mapState, mapMutations} from 'vuex' //vuex提供的映射函数，用来简化代码的 export default { activated() { if (this.refreshSearch) { // 若为true，则执行重置页面等相关操作 this.fetchData(); } else { this.reset(true); } }, methods：{ fetchData() { // 获取页面数据 }, ...mapMutations({ reset: 'setRefreshSearch' // 将 `this.reset()` 映射为 `this.$store.commit('setRefreshSearch')` }) }, computed: { ...mapState([ 'refreshSearch' // 映射 this.refreshSearch 为 this.$store.state.refreshSearch ]), } } </script>
当我们从搜索页去详情页时，希望搜索页缓存，只需要把标记设为false：
methods: { goDetail() { this.reset(false) // 这样返回搜索页的时候，搜索页就不会重置数据了 this.$router.push({path: '/detail'}) }, ...mapMutations({ reset: 'setRefreshSearch' }) }
当我们从首页去搜索页时，希望搜索页数据重置，只需把标记设为true：
methods: { goSearch() { this.reset(true) // 这样去搜索页时数据就会被重置了 this.$router.push({path: '/search'}) }, ...mapMutations({ reset: 'setRefreshSearch' }) }
效果预览
总结
本文介绍了按需使用keep-alive，以及借助vuex来控制keep-alive的组件页面的数据是否需要重置刷新，希望对大家有帮助。
附送相关知识传送门：
以上所述是小编给大家介绍的keep-alive + vuex 让缓存的页面灵活起来详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: