Vue设置全局变量以及Vuex值当页面刷新时数据清空

        Vue设置全局变量以及Vuex值当页面刷新时数据清空

一、src/api文件夹下新建globalVariable.js文件

// 题库id
const questionBankId = '';
// 题库名称
const questionBankTitle = '';
// 定义普通章节id或者模考章节部分id
const charpterIdx = '';
// 题库类型，0：普通题库，1：模考题库
const questionType = '';
// 章节名称
const charpterNamex = '';

//用export default 暴露出去,供其他vue文件使用
export default {
	questionBankId:'',
	questionBankTitle: '',
	charpterIdx:'',
	questionType:'',
	charpterNamex:'',
	
	// 设置属性方法
	setQuestionBankId(questionBankId){
		this.questionBankId = questionBankId;
	},
	setQuestionBankTitle(questionBankTitle){
		this.questionBankTitle = questionBankTitle;
	},
	setCharpterIdx(charpterIdx){
		this.charpterIdx = charpterIdx;
	},
	setQuestionType(questionType){
		this.questionType = questionType;
	},
	setCharpterNamex(charpterNamex){
		this.charpterNamex = charpterNamex;
	},
}

二、vue页面赋值和使用全局变量

1、先引入全局配置文件globalVariable.js

import globalVariable from '@/api/globalVariable'

2、使用globalVariable赋值全局变量以及获取全局变量值

// 获取值
mounted(){
	let that = this;
	that.questionTypes = globalVariable.questionType;
	that.charpterIds = globalVariable.charpterIdx;
	that.charpterNames = globalVariable.charpterNamex;
	that.initQuestion();
},

// 赋值
// 修改全局变量值
globalVariable.setCharpterIdx(id);
globalVariable.setQuestionType('1');
globalVariable.setCharpterNamex(title);
that.$router.push({path: '/questionList'})

三、文件路径

 

四、使用场景

1、配置并读取文件信息

介绍：在使用vue中我们需要将所有的接口进行统一的配置在摸个具体文件夹中，这样即使后台接口地址修改我们能够很方便的修改接口Api,不用再到具体vue文件中进行查找，浪费时间。

接口调用直接先引入该文件，然后直接调用即可。

2、路由参数存储

介绍：我们在进行vue路由时需要传递一些参数，有时候我们不想把参数暴露在URL地址栏中，我们可以通过全局配置文件进行动态传参。

注意：该项目全局变量还是针对于具体某个浏览器，不会像后台全局变量一样所有用户都会共享，所有放心使用。

注意事项：在使用路由传参的时候，如果页面刷新当前页面获取的全局变量信息也就消失了，注意使用。

五、使用vuex进行数据传递

vuex介绍：其中包括变量定义、赋值、取值。

博客地址：

https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

https://segmentfault.com/a/1190000015782272

总结：在使用vuex的时候也会存在页面刷新数据消失问题。

问题描述以及解决方法：

博客地址：

https://blog.youkuaiyun.com/qq_42209411/article/details/85218244

https://blog.youkuaiyun.com/guzhao593/article/details/81435342

归纳总结：使用sessionStorage进行数据存储比较合理。

sessionStorage：针对一个 session 的数据存储（关闭窗口，存储的数据清空）