使用vuex记住当前页面页码信息，以便从详情页返回列表页时能还原到上一次页面

news2024/11/15 23:54:53

文章目录

- - - 一、在vuex中需要完成的工作
    - 二、在需要记住页面信息的列表页组件中添加如下代码，比如list.vue:
    - 三、在详情页添加返回按钮（可选）
    - 四、顺便来总结下，能返回上一级页面的方法有2类5种：
    - 五、总结，记住当前页面页码信息与框架无关，只与vuex有关，所以可以用于任意vue项目中

先来看看效果：

效果文字描述：

1、初始为页码1
2、点击页码4
3、跳转到第4页
4、点击右侧的按钮，跳转到详情页
5、展示的详情页，点击详情页的返回上一页按钮
6、回到列表页，列表页会定位到上一次的分页信息，即4.

一、在vuex中需要完成的工作

1、在store中新建一个modules（大部分vuex都会用modules来分割），比如取名为：backtolist.js，代码如下

/*
    记住当前分页信息，以便从详情页或其他页面返回列表页时，能还原上次页码
 */
const backtolist = {
  state: {
    currentPage: 1
  },

  mutations: {
    SET_CURRENT_PAGE: (state, currentPage) => {
      state.currentPage = currentPage;
    }
  },

  actions: {
    setCurrentPage({ commit }, currentPage) {
      commit("SET_CURRENT_PAGE", currentPage);
    }
  }
};
export default backtolist;

2、在store/index.js中导入 backtolist:

import backtolist from "./modules/backtolist";
import getters from "./getters";
...
const store = new Vuex.Store({
  modules: {
    backtolist //返回上一级时，保留页码信息
  },
  getters
});

export default store;

3、在getters.js中获取定义好的currentPage变量

const getters = {
 ...
  currentPage: (state) => state.backtolist.currentPage,
};
export default getters;

二、在需要记住页面信息的列表页组件中添加如下代码，比如list.vue:

1、在script脚本中依次添加如下代码：

import { mapGetters } from "vuex";
export default {
   data() {
       return {
           listQuery: {
            page: 1,  //当前页码
            pageNum: 10, //一页有多少条
          },
          total:0 //总页数
       }
   },
  //使用计算属性同步store的currentPage变量
  computed: {
    ...mapGetters([
      // 获得翻页信息
      "currentPage"
    ])
  },
  created() {
    // 读取store里保存的分页信息
    // console.log(this.currentPage);
    this.listQuery.page = this.currentPage;
  },
    // 路由钩子函数。翻页时，记住当前页信息
  beforeRouteLeave(to, from, next) {
    // 只有跳转到指定的详情页才记录翻页信息
    if (to.name === "exportTaskManageList") {
      //this.listQuery.page 表示当前页码
      this.$store.dispatch("setCurrentPage", this.listQuery.page);
    } else {
      this.$store.dispatch("setCurrentPage", 1);
    }
    next();
  }
}

2、在当前列表页的分页组件中（比如elementUI的el-pagination分页组件）添加如下信息：

之前的代码：

<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

现在的代码：

<el-pagination 
 v-if="total != 0"  //用于解决页面变了，但是页码视图没有更新的问题
 background @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :current-page.sync="listQuery.page" //添加了.sync
 :page-sizes="[10, 20, 30, 50]" 
 :page-size="listQuery.pageNum" 
 layout="total, sizes, prev, pager, next, jumper" 
 :total="total"> </el-pagination>

三、在详情页添加返回按钮（可选）

在详情页添加返回不是实现记住分页信息的必须步骤。所以本步骤可选。当用户从详情页回到列表页，就会走列表页分页逻辑。添加返回按钮，是增加了用户体验，方便用户快速回到上一页。

代码如下：

<el-button type="info" @click="$router.back()" icon="el-icon-back">返回</el-button>

四、顺便来总结下，能返回上一级页面的方法有2类5种：

1、若项目使用vue-router，则可以用以下两种：

this.$router.go(-1)
1. this.$router.go(-1) //后退+刷新；
2. this.$router.go(0) //刷新；
3. this.$router.go(1) //前进；
副作用：原页面表单中的内容会丢失。
this.$router.back()
1. this.$router.back() //后退
2. this.$router.back(0) //刷新
3. this.$router.back(1) //前进；
副作用：原页表表单中的内容会保留。