Vue中使用Vuex+sessionStorage实现不同页面之间传参

1. 使用场景

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

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

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

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

2. 使用步骤

1. 使用this.$store.commit()将需要缓存的数据存储到Vue store

// 例如
this.$store.commit('setRemark',row.remark)

2. 在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'),
}

3. 在需要使用的界面取值

 sessionStorage.getItem['remark']

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

sessionStorage.setItem('remark',remark)

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