vue页面跳转后,再次返回原页面,不清空查询条件

需求说明

通过查询条件查询到对应的结果(页面A),点击某一条列表数据,跳转到对应的详情页面(页面B),点击返回按钮,再次返回页面A,之前的页面A查询条件和页面需要保持原始状态。

解决思路

因前端使用vue框架,所以决定使用vuex实现该功能。每次离开页面时,将查询条件及页码保存到vuex中,下次回到该页面,读取vuex对应的数据,因有多个页面需要保留数据,所以创建多个模块。

加载vuex后项目无法启动

使用yarn add vuex下载依赖后,项目无法启动,后查看下载的vuex版本后,发现下载的是4.0.0之后的版本,此版本适用于vue3,而本项目使用的为vue2,导致版本不适配,无法正常启动项目。
切换为vuex3版本后,项目正常启动。

功能实现

在 Vue.js 使用 Vuex 来管理并区分多个页面的状态时,可以通过创建独立的模块来实现。每个页面的状态管理可以封装在一个 Vuex 模块中,这样可以清晰地管理多个页面的状态,避免混淆。以下是具体的实现步骤和代码示例:

步骤 1: 创建 Vuex Store

首先,设置 Vuex store,并为每个需要保存状态的页面创建一个模块。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import listPageA from './modules/listPageA';
import listPageB from './modules/listPageB';Vue.use(Vuex);export default new Vuex.Store({modules: {listPageA,listPageB}
});

步骤 2: 定义每个页面的 Vuex 模块

为每个列表页面创建一个模块,管理其状态(如查询参数和页码)。下列代码为listPageA.js代码,可以根据自身情况判断创建几个js代码

// store/modules/listPageA.js
const state = {query: {},currentPage: 1
};const mutations = {setQuery(state, query) {state.query = query;},setCurrentPage(state, page) {state.currentPage = page;}
};const actions = {saveQuery({ commit }, query) {commit('setQuery', query);},saveCurrentPage({ commit }, page) {commit('setCurrentPage', page);}
};export default {namespaced: true,state,mutations,actions
};

步骤 3: 在组件中使用 Vuex 模块

在 Vue 组件中,使用 Vuex 模块的状态并在合适的生命周期钩子中保存和恢复状态。

// components/ListPageA.vue
<template><div><!-- 页面 --></div>
</template><script>
import { mapState, mapActions } from 'vuex';export default {name: "ListPageA",data() {return {localQuery: {},localPage: 1};},computed: {...mapState('listPageA', ['query', 'currentPage'])},methods: {...mapActions('listPageA', ['saveQuery', 'saveCurrentPage']),fetchList() {// 查询方法}},created() {if (this.query && this.currentPage) {this.localQuery = this.query;this.localPage = this.currentPage;}this.fetchList();},beforeDestroy() {this.saveQuery(this.localQuery);this.saveCurrentPage(this.localPage);}
};
</script>

在这个例子中,ListPageA.vue 组件使用 Vuex 模块 listPageA 来管理其查询参数和页码。当组件被创建时,它检查 Vuex 中是否有保存的状态,并使用它来恢复列表的视图。在组件销毁前(如用户离开页面时),它保存当前的状态到 Vuex。

这种模式可以为每个需要保持状态的列表页面复制和调整,确保每个页面的状态互不干扰,同时也保持了状态管理的清晰和可维护性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/8.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python中socket详解使用教程(结尾有案列)

socket 是 Python 中用于网络通信的一个标准库。它提供了创建网络套接字并进行网络通信的接口。下面我会详细解释 Python 中 socket 的基本概念和使用方法。 简单列程&#xff0c;在文章后面&#xff0c;可以自行翻阅 基本概念 套接字&#xff08;Socket&#xff09;&#xf…

Vue源码解读学习

Vue源码 观察者模式 & 发布订阅 观察者模式&#xff1a;中心一对多 系统单点间的灵活和拓展&#xff08;广播的方式&#xff09; 发布订阅&#xff1a;将注册列表遍历发布给订阅者 initInject initState initProvide他们挂载顺序为什么这样设计&#xff1f; initstate…

大数据运维应用场景面试题汇总及参考答案(持续更新)

描述大数据环境下的数据备份和恢复策略。 在大数据环境下,数据备份和恢复策略是确保数据安全和业务连续性的关键措施。首先,备份策略需要根据数据的重要性、更新频率和业务需求来设计。对于关键数据,可能需要实施实时或近实时的备份,而对于不太重要的数据,则可以采用定期备…

解决npm run dev跑项目,发现node版本不匹配,怎么跑起来?【已解决】

首先问题点就是我们npm run dev 运行项目的时候发现出错&#xff0c;跑不起来&#xff0c;类型下面这种 这里的出错的原因在于我们的node版本跟项目的版本不匹配 解决办法 我这里的问题是我的版本是node14的&#xff0c;然后项目需要node20的&#xff0c;执行下面的就可以正…

html接入高德地图

1.申请key key申请地址&#xff1a;https://console.amap.com/dev/key/app 官方文档 https://lbs.amap.com/api/javascript-api-v2/summary 2.html接入示例 需要将YOUR_KEY替换成自己的key <!doctype html> <html> <head><meta charset"utf-…

python的抽象类和抽象方法

抽象类是一种不能直接被继承的类。举个例子&#xff0c;我们可以从类Creature衍生出类People&#xff0c;Cats&#xff0c;其中前者两条腿走路&#xff0c;后者四条腿走路&#xff0c;而单独的类Creature却没有一个几条腿走路的方法&#xff0c;因为这是不确定的。 &#xff0…

WebKit 入门介绍

WebKit的介绍 WebKit 是一个开源的浏览器引擎&#xff0c;主要用于处理和渲染网页内容。它包含了用于解析 HTML 和 CSS、构建及维护文档对象模型 (DOM)、渲染页面布局与图形、以及执行 JavaScript 脚本等一系列功能模块&#xff0c;旨在为用户提供快速、流畅且标准兼容…