當(dāng)組件中沒(méi)有關(guān)聯(lián)關(guān)系時(shí),需要實(shí)現(xiàn)數(shù)據(jù)的傳遞共享,可以使用Vuex

先不管圖片

一、安裝

在vue cli3中創(chuàng)建項(xiàng)目時(shí)勾選這個(gè)組件就可以了 或者手動(dòng)安裝

npm install store --save

二、使用

main.js

store.js

.vue文件

圖片中的js文件中有 三部分 分別與圖片上對(duì)應(yīng)

1. state中存儲(chǔ)數(shù)據(jù)

2. 而數(shù)據(jù)的修改需要先經(jīng)過(guò)action的dispatch方法 (不需要異步獲取的數(shù)據(jù)可以不經(jīng)過(guò)這一步,如上圖)

3. 然后經(jīng)過(guò)matations的commit方法

將展示在頁(yè)面上

{{ this.$store.state.city }}

還可以將數(shù)據(jù)保存到本地，使用

localStorage.city = city

補(bǔ)充知識(shí)：從vue文件中抽取出子組件的流程及過(guò)程中踩過(guò)的坑

流程：

1. 確保注冊(cè)、引入子組件的正確性：

創(chuàng)建一個(gè)新的vue文件，包含基本的template,及export的內(nèi)容，其中可簡(jiǎn)單包含空的data函數(shù)。暫時(shí)先不把子組件中的代碼移出。在父組件中import進(jìn)該子組件的.vue文件，要注意的是路徑名要正確，“../”表示的是當(dāng)前文件所在目錄的上層目錄，“./”表示的是當(dāng)前文件夾下。所以，如果子組件和父組件在同一個(gè)目錄下，只需在父組件中加上：

import ChildComponent from './ChildComponent.vue‘；

引入子組件后，需要在父組件中注冊(cè)子組件，主需要在父組件的components屬性中注冊(cè)該子組件：

components: {
'child-component': ChildComponent
}

這樣就注冊(cè)成功了，不需要調(diào)用new ChildComponent()

2.移出組件相關(guān)的template,及method，定義好父組件及子組件的接口：props{}，props在子組件中定義，父組件中傳入。父組件中若需傳入動(dòng)態(tài)值，則在父組件中可以用v-bind綁定傳入的值。

踩過(guò)的坑（比較細(xì)碎）：

1.屬性的綁定問(wèn)題：

:property="variable"與property="variable"的區(qū)別：如果使用v-bind:property則默認(rèn)后面的值是一個(gè)變量，在編譯器解析到這句話時(shí)，解析器會(huì)去data中尋找該變量，而若使用第二種定義的屬性的方法，則解析器會(huì)默認(rèn)后面的值為一個(gè)字符串。意味著：如果傳入一個(gè)布爾值，則第一種方法會(huì)傳入布爾值，第二種只是簡(jiǎn)單的傳入字符串。

2.父組件與子組件的通信接口——props：

定義的props中的各屬性需盡量是地位平等的一系列屬性，盡量不要將所有屬性放入一個(gè)對(duì)象中傳入。因?yàn)楹笳邚母附M件傳入子組件的對(duì)象，只要對(duì)象中少傳了一個(gè)值就會(huì)報(bào)錯(cuò)，而且當(dāng)傳入的是個(gè)對(duì)象時(shí)，維護(hù)的成本也會(huì)變大，整個(gè)代碼的復(fù)雜度也會(huì)增加?？墒沁@次項(xiàng)目中由于這些參數(shù)確實(shí)都是作為一個(gè)整體的，所以就封裝成了一個(gè)對(duì)象進(jìn)行綁定了，變成對(duì)象，坑就多啦。子組件中的props需要定義對(duì)象中各屬性的類型。

3.子組件向父組件傳遞數(shù)據(jù)——$emit：

當(dāng)子組件中的值發(fā)生了改變，或觸發(fā)了某個(gè)事件時(shí)，我們需要手動(dòng)$emit，將變化告知父組件。語(yǔ)法是vm.$emit(event, [args])。然后在父組件中監(jiān)聽(tīng)該event，然后當(dāng)監(jiān)聽(tīng)到該event時(shí)，觸發(fā)父組件中定義的某個(gè)方法。在template中綁定這個(gè)事件監(jiān)聽(tīng)時(shí)，我們并不需要顯示的寫(xiě)出傳入的參數(shù)的形參，因?yàn)樵趖emplate中直接寫(xiě)出形參，解析器會(huì)以為這是已經(jīng)定義好的變量，會(huì)去data中尋找。若尋找不到則會(huì)報(bào)錯(cuò)。所以，在template中我們只要寫(xiě)：@event = "anotherEvent",然后在methods中定義anotherEvent方法時(shí)，寫(xiě)上形參。一定要分清形參和實(shí)參?。。?/p>

4. 父組件與子組件定義的props需雙向綁定的問(wèn)題（父、子組件的雙向綁定并不是必需的，只是本項(xiàng)目中有次需求）：

若需要雙向綁定，需在data中也定義需雙向綁定的值，然后將props中的值賦值給data中的對(duì)應(yīng)值。然后在template中通過(guò)v-model綁定該data值。為什么不在v-model中直接綁定props中的值呢？因?yàn)閜rops最好是單項(xiàng)數(shù)據(jù)流。然后當(dāng)我們需同時(shí)監(jiān)聽(tīng)data中的對(duì)象和props中的對(duì)象，可能會(huì)導(dǎo)致死循環(huán)。因?yàn)?，我們前提是data中的對(duì)象是由props賦給的。所以props值的變化，會(huì)導(dǎo)致data的變化，data的變化，又會(huì)導(dǎo)致props的變化。

此外，要注意的是，當(dāng)我們監(jiān)聽(tīng)的是對(duì)象時(shí)，直接用watch，是淺層的監(jiān)聽(tīng)，因?yàn)閷?duì)象本質(zhì)是只是一個(gè)指向內(nèi)存某個(gè)地址的指針，只要地址不變，就不會(huì)觸發(fā)更新，那我們希望對(duì)象中的內(nèi)容變化了，也觸發(fā)更新，則我們需使用以下方式：

watch: {
propA: {
handler: function(){},
deep: true

}
}

(props的雙向綁定會(huì)使得邏輯很復(fù)雜，其實(shí)也可以使用.sync修飾符，但是該修飾符在Vue 2.0版本中被移除了，但在2.3.0+中又被重新引入了。所以，要使用.sync要先看看package.json中配置的版本)

以上這篇Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論