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.csdn.net/qq_42209411/article/details/85218244

https://blog.csdn.net/guzhao593/article/details/81435342

歸納總結：使用sessionStorage進行數據存儲比較合理。

sessionStorage：針對一個 session 的數據存儲（關閉窗口，存儲的數據清空）