當組件中沒有關聯關系時,需要實現數據的傳遞共享,可以使用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實現組件數據共享案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的js 操作vuex数据_Vue.js中使用Vuex实现组件数据共享案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。