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

先不管圖片

一、安裝

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

npm install store --save

二、使用

main.js

store.js

.vue文件

圖片中的js文件中有 三部分 分別與圖片上對應

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

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

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

將展示在頁面上

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

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

localStorage.city = city

補充知識：從vue文件中抽取出子組件的流程及過程中踩過的坑

流程：

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

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

import ChildComponent from './ChildComponent.vue‘；

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

components: {
'child-component': ChildComponent
}

這樣就注冊成功了，不需要調用new ChildComponent()

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

踩過的坑（比較細碎）：

1.屬性的綁定問題：

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

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

定義的props中的各屬性需盡量是地位平等的一系列屬性，盡量不要將所有屬性放入一個對象中傳入。因為后者從父組件傳入子組件的對象，只要對象中少傳了一個值就會報錯，而且當傳入的是個對象時，維護的成本也會變大，整個代碼的復雜度也會增加。可是這次項目中由于這些參數(shù)確實都是作為一個整體的，所以就封裝成了一個對象進行綁定了，變成對象，坑就多啦。子組件中的props需要定義對象中各屬性的類型。

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

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

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

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

此外，要注意的是，當我們監(jiān)聽的是對象時，直接用watch，是淺層的監(jiān)聽，因為對象本質是只是一個指向內存某個地址的指針，只要地址不變，就不會觸發(fā)更新，那我們希望對象中的內容變化了，也觸發(fā)更新，則我們需使用以下方式：

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

}
}

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

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

最新評論