當元件中沒有關聯關係時,需要實現資料的傳遞共享,可以使用Vuex

先不管圖片

一、安裝

在vue cli3中建立專案時勾選這個元件就可以了 或者手動安裝

npm install store --save

二、使用

main.js

store.js

.vue檔案

圖片中的js檔案中有 三部分 分別與圖片上對應

1. state中儲存資料

2. 而資料的修改需要先經過action的dispatch方法 (不需要非同步獲取的資料可以不經過這一步,如上圖)

3. 然後經過matations的commit方法

將展示在頁面上

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

還可以將資料儲存到本地，使用

localStorage.city = city

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

流程：

1. 確保註冊、引入子元件的正確性：

建立一個新的vue檔案，包含基本的template,及export的內容，其中可簡單包含空的data函式。暫時先不把子元件中的程式碼移出。在父元件中import進該子元件的.vue檔案，要注意的是路徑名要正確，“../”表示的是當前檔案所在目錄的上層目錄，“./”表示的是當前資料夾下。所以，如果子元件和父元件在同一個目錄下，只需在父元件中加上：

import ChildComponent from './ChildComponent.vue‘；

引入子元件後，需要在父元件中註冊子元件，主需要在父元件的components屬性中註冊該子元件：

components: {
'child-component': ChildComponent
}

這樣就註冊成功了，不需要呼叫new ChildComponent()

2.移出元件相關的template,及method，定義好父元件及子元件的介面：props{}，props在子元件中定義，父元件中傳入。父元件中若需傳入動態值，則在父元件中可以用v-bind繫結傳入的值。

踩過的坑（比較細碎）：

1.屬性的繫結問題：

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

2.父元件與子元件的通訊介面——props：

定義的props中的各屬性需儘量是地位平等的一系列屬性，儘量不要將所有屬性放入一個物件中傳入。因為後者從父元件傳入子元件的物件，只要物件中少傳了一個值就會報錯，而且當傳入的是個物件時，維護的成本也會變大，整個程式碼的複雜度也會增加。可是這次專案中由於這些引數確實都是作為一個整體的，所以就封裝成了一個物件進行綁定了，變成物件，坑就多啦。子元件中的props需要定義物件中各屬性的型別。

3.子元件向父元件傳遞資料——$emit：

當子元件中的值發生了改變，或觸發了某個事件時，我們需要手動$emit，將變化告知父元件。語法是vm.$emit(event,[args])。然後在父元件中監聽該event，然後當監聽到該event時，觸發父元件中定義的某個方法。在template中繫結這個事件監聽時，我們並不需要顯示的寫出傳入的引數的形參，因為在template中直接寫出形參，解析器會以為這是已經定義好的變數，會去data中尋找。若尋找不到則會報錯。所以，在template中我們只要寫：@event = "anotherEvent",然後在methods中定義anotherEvent方法時，寫上形參。一定要分清形參和實參！！！

4. 父元件與子元件定義的props需雙向繫結的問題（父、子元件的雙向繫結並不是必需的，只是本專案中有次需求）：

若需要雙向繫結，需在data中也定義需雙向繫結的值，然後將props中的值賦值給data中的對應值。然後在template中通過v-model繫結該data值。為什麼不在v-model中直接繫結props中的值呢？因為props最好是單項資料流。然後當我們需同時監聽data中的物件和props中的物件，可能會導致死迴圈。因為，我們前提是data中的物件是由props賦給的。所以props值的變化，會導致data的變化，data的變化，又會導致props的變化。

此外，要注意的是，當我們監聽的是物件時，直接用watch，是淺層的監聽，因為物件本質是隻是一個指向記憶體某個地址的指標，只要地址不變，就不會觸發更新，那我們希望物件中的內容變化了，也觸發更新，則我們需使用以下方式：

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

}
}

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

以上這篇Vue.js中使用Vuex實現元件資料共享案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。