使用vuex记住当前页面信息,以便在返回时能还原列表页的页面

从以上代码中,你也发现了,其实记住当前页码是使用了`vuex`的这个能保留全局变量的特性,与当前`elementUI`等前端`UI`框架无关,意味着你可以用于任何`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、在当前列表页的分页组件中(比如elementUIel-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>

四、顺便来总结下,能返回上一级页面的方法有3类5种:

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

  1. this.$router.go(-1)

    1. this.$router.go(-1) //后退+刷新;
    2. this.$router.go(0) //刷新;
    3. this.$router.go(1) //前进;

    副作用:原页面表单中的内容会丢失。

  2. this.$router.back()

    1. this.$router.back() //后退
    2. this.$router.back(0) //刷新
    3. this.$router.back(1) //前进;

    副作用:原页表表单中的内容会保留。

2、也可使用JS的原生方法:

  1. history.go(-1);

  2. history.back();

3、直接用路由的push方法

该方法其实就是常规的vue的页面跳转方法,严格意义上来说不是返回到上一级。因为它可以跳转到任意路由页面。

// vue组件
<el-button type="primary" size="small" @click="backClick">返回</el-button>
//新增路由    
backClick() {
    this.$router.push({
        name: "list"
    });
},

那么vue的方法和JS的方法区别在哪里:

history.go(-1)是返回浏览器的上一页,而由于Vue是单页面应用,有的浏览器对于hash变更不认为是两个不同的页面,在hash模式下就不会跳回浏览器上一页

五、更简单的实现方法

注意:在这里用的是getters,其实直接用state也可以,代码改为如下:

1、list.vue中,需要修改2个地方

//1、第一个修改的地方
//将:
import { mapGetters } from "vuex";
//改为:
import { mapState } from "vuex";
//2、第二个修改的地方
  computed: {
    //将
    ...mapGetters([
      // 获得翻页信息
      "currentPage"
    ])
    //改为:
    ...mapState({
      currentPage: (state) => state.backtolist.currentPage
    })
  },

2、storegetter.js修改的地方:

将如下代码删除:

currentPage: (state) => state.backtolist.currentPage,

这样也能起到一样的效果。

他们的区别就是state是getters的计算得到的结果。就像data之于computed。

六、总结,记住当前页面页码信息与框架无关,只与vuex有关,所以可以用于任意vue项目中

从以上代码中,你也发现了,其实记住当前页码是使用了vuex的这个能保留全局变量的特性,与当前elementUI等前端UI框架无关,意味着你可以用于任何vue项目中。

本质上来说,甚至不需要用vuex来实现,比如你可以用H5的本地存储(localstage)对象来实现保存页面的功能。

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,059
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top