vuex實現兄弟元件之間傳值

2021-10-08 18:20:07 字數 1237 閱讀 5110

vuex傳值

我的早前的一篇部落格vue之間的傳值,那時還沒有去了解vuex所以沒有做這方面的筆記,昨天認真看了一下網上講解的雖然不能說全部理解透,但是有了乙個大致的理解。

vuex主要用於管理vue中的資料,但是網上說最好大型專案用,其他的一些中小型或者小型的專案能別用盡量別用(現在還不太理解),vuex中主要包含四類:state、getter、mutations、actions,之間的關係如下圖:

從上圖可以很清晰的看到每個狀態之間的觸發的方法,其中,state主要用於管理專案的資料(進行資料初始化);getters就要讀取state中的資料,相當於computed當資料進行更新時讀取資料;mutations主要用於操作state中的資料,說白了就是對state資料進行更改;action 提交的是 mutation,而不是直接變更狀態,(dispatch)觸發,(引數需要context)。

理解了這個圖,才能真正的明白各個之間的到底負責什麼樣的操作。這篇文章主要說兄弟元件之間的傳值吧,寫乙個簡單的例子(我在學vuex的時候看的例子)

上圖是我的專案目錄結構,主要用到child.vue和helloworld.vue這兩個元件,在src資料夾下建立store目錄,再建立乙個index.js檔案。

child.vue元件

helloworld.vue元件

上面就是乙個最基本的例子,執行後,開啟頁面會在顯示兩個元件中獲取到的state值,當在helloworld.vue元件的input輸入框中輸入內容時,會同時改變兩個元件的顯示,相當於在helloworld.vue元件中改變資訊,child.vue元件中會

接收到資訊,並發生改變。

這只是我的很淺的理解,我會繼續深入學習並持續更新文章,希望對大家有所幫助,同時也歡迎指出我的錯誤和不足。

vue頁面(兄弟元件)之間傳值

最近重溫了 射鵰英雄傳 郭靖學習了降龍十八掌 九陰真經等一身絕世武功,卻不懂得如何運用,他也說一直自己蠢,真是蠢啊。今天面試,面試官問我頁面a跳轉到b怎麼傳值,我想了半天沒想到,後面他提示用vuex。啊,我真是蠢啊 歸根結底,都是實戰經驗太少。對於單頁面應用,頁面傳值就是元件之間傳值 那麼,元件之間...

vue兄弟父子元件之間傳值

一 父元件修改子元件的值 1.在父元件中宣告子元件 import editstability from edit editsimilarstability.vue 2.使用引入的子元件,可以通過 ref 這個 attribute 為子元件賦予乙個 id 引用 v if editvisible ref...

angular父子元件的傳值,兄弟之間傳值

1.父級向子級傳值,不管是屬性,方法,還是整個父級物件this,都可以通過類似變數的形式傳入,具體如下 import from angular core 通過input裝飾器獲取父級傳過來的值 input msg string 獲取值 ngoninit 直接 this 可以引用 2.父級獲取子元件的...