Vue 页面状态保持页面间数据传输的一种方法(推荐)


Posted in Javascript onNovember 01, 2018

如果大家觉得有用,更多的模块请 点击查看

vue router给我们提供了两种页面间传递参数的方式:

  • 动态路由匹配
  • 编程式的导航
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

下面介绍一下 vue-viewplus 一个简化Vue应用开发的工具库 中的参数栈模块params-stack.js:

该插件为Vue实例提供了一个 $vp 属性,模块提供了一系列api,来做自己的页面参数方式:

// 跳转页面,并传递参数
this.$vp.psPageNext('/Demo/PageStack/Page2', {
 params: {
  phoneNumb: '15111111111'
 }
})

这一点和vue router给我们提供的传递方式类似,并且目前还不支持 query: { plan: 'private' } 传递url参数,但是我们为什么还要做这个模块:

  • 提供一个 栈 来管理栈内所有页面的参数,方便页面在回退的时候,拿到对应页面的 缓存参数 ;即一般我们使用vue router的时候每个页面的参数(除了使用url参数),在做统一返回键处理的时候,都不太方便进行页面状态恢复,而如果我们提供了一个栈,在页面入栈的时候,将当前页面的参数存储,在下一个页面点击返回按钮回到当前页面的时候我们再从参数栈恢复参数,这样就能实现客户端开发中具有的这一特性;
  • 该参数栈也支持缓存->自动恢复,vuex state和session storage两级存储保证参数栈不会被页面刷新而导致页面参数丢失
  • 也为了统一编程方式

并且,当前模块提供的参数传递方式,和vue router给我们提供了两种页面间传递参数的方式, 并不冲突 ,可以互补使用。

只不过目前插件的参数栈并没有管理vue router帮我们传递的参数;

vuex state 参数栈存储示例:

Vue 页面状态保持页面间数据传输的一种方法(推荐)

session storage 参数栈二级存储示例:

Vue 页面状态保持页面间数据传输的一种方法(推荐)

示例

模拟一个简单表单提交流程

Vue 页面状态保持页面间数据传输的一种方法(推荐)

图 详见源码 example 项目中当前模块示例

表单录入页面(简称:Page1)

<template>
 <group title="模拟手机号充值 - 堆栈底-第一页" label-width="5em" class="bottom-group">
  <box gap="10px 10px">
   <x-input title="手机号" v-model="dataParams.phoneNumb"></x-input>
  </box>
  <box gap="10px 10px">
   <x-button plain @click.native="submit()">点击充值</x-button>
   <x-button plain @click.native="modify()">修改参数栈内参数对象</x-button>
  </box>
 </group>
</template>

<script type="text/ecmascript-6">
import demoMixin from '../demo-mixin'
import { XInput } from 'vux'
// 1.参数栈模块提供的一个**混入**组件,方便页面组件简化参数栈的api操作和开发,详见下面的`paramsStack mixin`说明
import { paramsStack } from 'vue-viewplus'

export default {
 // 2.使用`paramsStack mixin`
 mixins: [paramsStack, demoMixin],
 components: {
  XInput
 },
 data() {
  return {
   // 3.【可选】`paramsStack mixin`中定义的`data`属性,声明当前页面组件是参数栈的栈底,当当前页面被点击返回弹出的时候,插件会检测这个属性,如果为true,就清空参数栈
   // isStackBottom: true,
   // 4.自定义需要传递到下一个页面的参数
   dataParams: {
    phoneNumb: ''
   }
  }
 },
 methods: {
  submit() {
   this.$vp.psPageNext('/Demo/PageStack/Page2', {
    params: this.dataParams
   })
  }
 },
 created() {
  // 【可选】类似第三步
  // this.isStackBottom = true
  // 5.解析回传参数
  if (!_.isEmpty(this.backParams)) {
   this.dataParams.phoneNumb = this.backParams.phoneNumb
   this.$vp.toast(`通过 backParams.phoneNumb 预填写页面`)
  }
 }
}
</script>

表单确认页面(简称:Page2)
<template>
 <group label-width="15em" class="bottom-group">
  <form-preview header-label="请确认订单信息" :body-items="list" ></form-preview>
  <x-input title="请输出充值金额" v-model="dataParams.amount" style="margin-top: 10px"></x-input>
  <box gap="10px 10px">
   <flexbox>
    <flexbox-item>
     <x-button type="default" @click.native="replace()">确认</x-button>
    </flexbox-item>
    <flexbox-item>
     <x-button type="default" @click.native="bck()">返回(回传参数)</x-button>
    </flexbox-item>
   </flexbox>
  </box>
 </group>
</template>

<script type="text/ecmascript-6">
import demoMixin from '../demo-mixin'
import { paramsStack } from 'vue-viewplus'
import { XInput, FormPreview, Flexbox, FlexboxItem } from 'vux'

export default {
 mixins: [paramsStack, demoMixin],
 components: {
  FormPreview,
  Flexbox,
  FlexboxItem,
  XInput
 },
 data() {
  return {
  // 1. 回显上一个页面录入的手机号
   list: [
    {
     label: '手机号',
     value: ''
    }
   ],
   // 2. 自定义需要传递到下一个页面的参数
   dataParams: {
    phoneNumb: '',
    amount: '50元'
   }
  }
 },
 methods: {
  /**
   * 4.提交表单方式1
   * 如果需要下一个页面点击返回,任然要回显当前页面,就调用该方法
   * /
  next() {
   this.$vp.psPageNext('/Demo/PageStack/Page4', { params: this.dataParams })
  },
  /**
   * 4.提交表单方式2
   * 一般确认页面都无需被“保留”,故这里使用`this.$vp.psPageReplace`接口完成跳转,底层将会使用
   * `router.replace({location})`完成跳转
   */
  replace() {
   this.$vp.psPageReplace('/Demo/PageStack/Page4', {params: this.dataParams})
  },
  bck() {
   this.$vp.psPageGoBack({
    // 3.设置回传参数
    backParams: {
     phoneNumb: '13222222222'
    }
   })
  }
 },
 created() {
  this.list[0].value = this.params.phoneNumb
  this.dataParams.phoneNumb = this.params.phoneNumb
 }
}
</script>

表单结果页面(简称:Page4)
<template>
 <div>
  <msg title="操作成功" :description="description" :buttons="buttons"></msg>
 </div>

</template>

<script type="text/ecmascript-6">
 import demoMixin from '../demo-mixin'
 import { paramsStack } from 'vue-viewplus'
 import { FormPreview, Msg } from 'vux'

 export default {
  mixins: [paramsStack, demoMixin],
  components: {
   FormPreview,
   Msg
  },
  data() {
   return {
    description: '',
    buttons: [{
     type: 'primary',
     text: '在做一笔',
     onClick: ((that) => {
      return () => {
       // 返回栈顶页面
       that.$vp.psPageGoBack()
      }
     })(this)
    }, {
     type: 'default',
     text: '完成',
     onClick: ((that) => {
      return () => {
       // 返回指定页面,并清空参数栈
       // that.$vp.psPageGoBack({
       //  backPopPageNumbs: -2,
       //  clearParamsStack: true
       // })
       that.$vp.psPageNext('/Demo', {
        clearParamsStack: true,
        backState: true
       })
      }
     })(this)
    }]
   }
  },
  created() {
   this.description = `${this.params.phoneNumb} 成功充值 ${this.params.amount}`
  }
 }
</script>

paramsStack mixin

以上3个页面都集成了 paramsStack mixin ,定义如下:

/**
 * 参数栈mixin对象
 * <p>
 *  方便页面组件继承之后操作参数栈
 * @type {Object}
 */
export const paramsStackMixin = {
 data() {
  return {
   /**
    * 声明该页面是栈底部
    */
   isStackBottom: false
  }
 },
 computed: {
  ...mapGetters([
   /**
    * 查看`vuex#vplus.paramsStack[top-length]`栈顶参数
    */
   'params'
  ]),
  /**
   * 查看`vuex#vplus.backParams`回传参数
   */
  backParams() {
   return this.$store.state[MODULE_NAME].backParams
  },
  /**
   * 查看`vuex#vplus.backState`是否是出栈|是否是返回状态
   */
  backState() {
   return this.$store.state[MODULE_NAME].backState
  }
 },
 methods: {
  ...mapMutations([
   /**
    * 入栈
    */
   'pushParams',
   /**
    * 修改栈顶参数
    */
   'modifyParams',
   /**
    * 出栈
    */
   'popParams',
   /**
    * 清空参数栈
    */
   'clearParamsStack',
   /**
    * 设置是否是出栈|是否是返回状态(点击返回页面)
    */
   'setBackState'
  ])
 },
 // 导航离开该组件的对应路由时调用
 beforeRouteLeave(to, from, next) {
  if (this.backState && this.isStackBottom) {
   this.clearParamsStack()
  }
  next()
 }
}

配置

没有个性化配置,可以查看全局通用配置

API接口

restoreParamsStack

/**
  * $vp.restoreParamsStack()
  * 恢复插件中`vuex#$vp.paramsStack` && vuex#$vp.backParams` && vuex#$vp.backState`参数栈所用状态
  * <p>
  * 在当前模块重新安装的时候,一般对应就是插件初始化和页面刷新的时候
  */
 restoreParamsStack()

psModifyBackState

/**
  * $vp.psModifyBackState(bckState)
  * <p>
  * 设置`vuex#vplus.backState`返回状态
  * @param {Boolean} [backState=false]
  */
 psModifyBackState(bckState)

psClearParamsStack

/**
  * $vp.psClearParamsStack()
  * <p>
  * 清空参数栈
  */
 psClearParamsStack()

psPageNext

/**
  * $vp.(location[, {params = {}, clearParamsStack = false, backState = false} = {}])
  * <p>
  * 页面导航
  * @param location router location对象
  * @param {Object} [params={}] 向下一个页面需要传递的参数
  * @param {Boolean} [clearParamsStack=false] 在进行页面导航的时候,是否清空参数栈,默认为false
  * @param {Boolean} [backState=false] 设置`vuex#vplus.backState`返回状态,默认为false
  */
 psPageNext(location, {params = {}, clearParamsStack = false, backState = false} = {})

psPageReplace

/**
  * $vp.(location[, {params = {}, isPop = true} = {}])
  * <p>
  * 页面导航(基于Router),移除上一个页面
  * <p>
  *  将会出栈顶对象,并重新设置`params`为参数栈的栈顶参数
  *  注:在调用该方法的页面,必须是要调用`ParamsStack#psPageNext`导航的页面,因为需要保证“弹栈”操作无误,
  *  又或者设置`isPop`为false
  * @param location router location对象
  * @param {Object} [params={}] 向下一个页面需要传递的参数
  * @param {Boolean} [isPop=false] 是否pop当前页面的参数后在进行页面跳转,默认为true,防止当前页面
  * 不是通过`ParamsStack#psPageNext`导航过来的,但是由需要使用当前方法
  */
 psPageReplace(location, {params = {}, isPop = true} = {})

psPageGoBack

/**
  * $vp.psPageGoBack({backParams = {}, clearParamsStack = false, backPopPageNumbs = -1} = {})
  * <p>
  * 页面回退
  * @param {Object} backParams 设置回传参数
  * @param {Boolean} clearParamsStack 是否清空参数栈
  * @param {Number} backPopPageNumbs 出栈页面数
  */
 psPageGoBack({backParams = {}, clearParamsStack = false, backPopPageNumbs = -1} = {})
Javascript 相关文章推荐
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 #Javascript
微信小程序实现留言板
Oct 31 #Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 #Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 #Javascript
微信小程序实现留言功能
Oct 31 #Javascript
微信小程序签到功能
Oct 31 #Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
You might like
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
shiro授权的实现原理
2017/09/21 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
从0开始的Python学习016异常
2019/04/08 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
python 读取串口数据的示例
2020/11/09 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
市场营销方案范文
2014/03/11 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
总经理检讨书范文
2015/02/16 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技