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。

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