前端項目中數據傳遞的幾種“姿勢”

數據傳遞在項目中是個很重要的話題，因爲它牽扯到了一個APP，或者web-app的最重要一步：功能聯動。

絲毫不隱瞞的說，筆者曾經迫切的想要學node.js的動力之一就在於它可以作爲後端去進行數據的處理和傳遞使用。這在之前是不可能單單通過前端實現的。

原生JavaScript中的數據傳遞

後來，HTML進化到了HTML5，內增了API——localStorage & sessionStorage。
但是有一點難受的是：這兩個API的主要作用是去“持久存儲數據”，而並不能做到真正的“傳遞”。
因爲localStorage存儲在瀏覽器當前頁面的Application中，去往下一個頁面時並不能帶過去。

但是我們有ajax。別慌，這裏並不是要講ajax，只是我們通過ajax的get請求可以發現：url可以傳遞參數並帶到另一個頁面去解析、使用，而一般不會對頁面造成什麼影響（xss先不說）

<a href="phoneshow.html?id=0"></a>

然後我們可以在另一個頁面通過split解析url，取出參數，如：

			function addphonetip(){
				//獲取當前路徑並切割ID
				var url = window.location.href;
				var phoneid = url.split("?")[1];
				//獲取當前ID的手機信息字符串
				phoneid = phoneid.replace("id=","").trim();
				//獲取並顯示————手機名稱
				phonename = phones[phoneid].split(" ")[0];
				document.getElementById("phonename").innerHTML = phonename.replace(/_/g," ");
				//獲取並顯示————手機價格
				Price = phones[phoneid].split(" ")[2];
				document.getElementById("Price").innerHTML = Price;
				//獲取並顯示————手機描述
				phonenamemini = phones[phoneid].split(" ")[1];
				document.getElementById("phonenamemini").innerHTML = phonenamemini;
				//獲取並顯示————手機圖片路徑
				var phonesrc = "./img/"+phonename.replace(/_/g," ")+".png";
				var phoneimg = document.getElementById("phoneimg");
				phoneimg.src = phonesrc;
			}

當然，還有一種方法是去修改外鏈JS中的【全局變量】。

vue組件間數據傳遞

vue作爲典型的PWA（單頁面應用），它依賴“組件”的形式將功能進一步劃分、解耦。
vue中使用localStorage就簡單很多，在vue-cli中，你可以：

//設置storage
localStorage.xxx="xxx";
//取出storage
localStorage.xxx

vue中組件傳值也是要分情況的：
（1）父子組件間傳值
所用技術：props、emit、on
在筆者的上一個項目中，有下面一段代碼：

<city-alphabet :cities="cities" @change="handleChange"></city-alphabet>
//同組件內，js
handleChange(letterr){
	this.letterr=letterr
}

//alphabet組件中
export default{
	props:{
		cities:Object
	},
	methods:{
		handleClick(e){
			this.$emit('change',e.target.innerText)
		}
	}
}

（2）爺孫組件間傳值
所用技術：provide、reject
（這一塊用的不多，代碼日後筆者遇到合適的即貼過來）

（3）非父子組件間傳值
這個有三種解決方案：

1. 若是兄弟組件，則可按照（1）所說，先由一個組件傳值給父組件，然後再由父組件傳給另一個子組件；
2. vuex
   vuex筆者曾經寫過單獨博客，這裏不再贅述，首先必須記住下面這張圖：
   
3. 新建文件，作爲Bus總線：

//在components文件夾下創建msg.js
import Vue from 'vue'
export default new Vue

然後，在需要使用的組件中都先引入：import Msg from './msg.js'
餘下和（1）一樣用$emit、$on即可。

react中的數據傳遞

父組件向子組件傳遞：props

子組件向父組件傳遞

1. 傳遞帶參的方法
2. redux

跨組件傳遞，解決數據比較深，傳遞了多層props的問題

context

React.createContext(defaultValue);

兄弟節點間傳遞數據
redux：

1. 同步：

action，reducer，store
store是存儲數據的地方：
createStore()用來創建store方法，接受一個回調函數reducer，和一系列中間件
store.subscribe()
註冊事件
store.dispatch()
通過發送action，觸發事件，發送action後，reducer根據action改變state的值
store.getState()
得到所有的state值

react-redux：
mapStateToProps(state, ownProps) 拿到state，頁面刷新
mapDispatchToProps(dispatch, ownProps) 拿到state，等待響應頁面操作，觸發事件。
connct(mapStateToProps, mapDispatchToProps)(子組件)

2. 異步：
   redux-thunk

微信小程序中的數據傳遞

其實筆者在微信小程序中用的最多的就是localStorage了，微信小程序和前面這幾個都不同，用localStorage風險小——沒幾個人會在手機上打開console！

但是微信小程序中明確指出了一種類似vuex的語法規則：
app.js中的global

因爲app.js就相當於微信小程序中的“全局容器”，我們完全可以在其中存放一個“讀取函數”、一個“修改函數”，以及這兩個函數牽扯到的數據變量：

var g_text=null;
App({
  getText(){
    return g_text;
  },
  updateText(text){
    g_text=text;
  }
})

在需要的地方（js文件中）先引入文件：

const app=getApp();

然後便可以在不同場景下調用對應函數，改變/獲取位於app.js中的“全局變量”值，在其他文件中同樣步驟再獲取/修改。

---

以上所說皆爲“在不同頁面/組件中傳遞【私有】數據” —— 這裏的“私有”表明了“只是爲了增加頁面/組件間的聯動性，而不能作用於用戶之間的聯繫”，要想達到後者，還就要後臺的參與不可，這個筆者後續會帶來。