1. 使用场景

最近公司产品项目逻辑层变多了,涉及到页面间的传参的参数会很多,而且页面之间跳转频繁。

之前参考了一篇文章,使用过,有一定的参考价值,此处贴出链接,大家可以参考一下 通过bus和watch监控$route结合进行路由之间的数据传递

由于项目变得越来越复杂,使用这个办法会很麻烦,也会出现一些刷新时参数丢失的问题,所以就把整体的传参方式改成了vuex+sessionStorage,这个方法目前我使用起来还是比较方便的

  1. 页面涉及多层面包屑,但是不想使用keep-alive时
  2. 页面之间有很多参数是相同的,需要从一个页面带到另一个页面

2. 使用步骤

  1. 使用this.$store.commit()将需要缓存的数据存储到Vue store
// 例如
this.$store.commit('setRemark',row.remark)
  1. 在store中新建一个js文件用于接收和修改this.$store.commit()提交上来的数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
	// 设置默认值
	remark:''
}
const mutations = {
	setRemark(state,remark){
    	state.remark = remark
    	sessionStorage.setItem('remark',remark)
  	},
}
const actions = {
  
}
const getters = {
 	remark:(state) => sessionStorage.getItem('remark'),
}
  1. 在需要使用的界面取值
 sessionStorage.getItem['remark']

注意:如果数据发生了改变,需要在发生改变的地方更新一下 sessionStorage中的值,更新的办法如下

sessionStorage.setItem('remark',remark)

简单三步就可以实现页面见的传值,而且数据存储于缓存中,取的时候会很方便的。
由于这是个人在项目中总结的,所以在写的时候存在一些问题,留存给自己以后可以查阅也希望对大家有用,有什么不足的地方欢迎指正哦~

Logo

前往低代码交流专区

更多推荐