vuex學習筆記

2022-06-28 07:51:08 字數 985 閱讀 1004

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式管理儲存管理應用的所有元件的狀態,並以相應規則保證狀態以一種可**的方式發生變化

1

newvue(7},

8//view

9template: `10}

11`,

12//

actions

13methods: 17}

18 })

這個狀態自管理應用包含以下幾個部分:

乙個全域性單例模式:

對上面圖的理解:把所有的狀態和資料放到乙個獨立的記憶體空間進行管理,稱為state,state裡面的資料會對映到元件上,當元件上的資料法還是能改變時,會通過dispatch作用域actions,actions可以進行一些非同步操作,比如與後端進行互動,然後會commit乙個mutations,(我們在元件中也可以commit乙個muations),commit muations是唯一乙個可以修改state的方式,其他任何方式都是不允許的

這樣設計是為了讓state修改可以**,state修改會對映到元件中

引用場景:

1、解決多個元件中的狀態共享,這些元件是兄弟元件或者是一些關聯度很低的元件,如果用$emit和prop這種方式,會非常複雜

2、資料傳遞。比如遇到一些跳轉場景,引數非常複雜,就可以用vuex

如果專案簡單,就沒必要用vuex

...mapgetters()寫在computed裡面

1

computed: ,

...mapmutations

({})寫在methods裡面

1

childselect (route) ,

5...mapmutations()

vuex學習筆記

1.基本結構及讀取state中的資料 2.子元件讀取全域性的state 注意slot的用法 3.mutations修改狀態,傳入的引數為state,mutations對應的是methods,commit中為事件名稱 4.mapstate的使用 5.mapmutations的使用1 6.actions...

vuex學習筆記

以下內容都是官網上進行學習,單向資料流模式 state 驅動應用的資料來源 view 以宣告方式將state對映到檢視 actions 響應在view上的使用者輸入導致的狀態變化 state 更新源資料 再次迴圈,如下圖所示 但是,當我們的大型專案遇到多個元件共享狀態時,單向資料流的簡潔性很容易被破...

vue學習筆記 vuex

store 倉庫部分 資料儲存 state state 可以顯示的展示資料格式等等,形象理解就是為資料佔位置。思考 在什麼位置可以 顯示的生成資料,除state內以外?獲取資料 getters getters 寫入獲取資料的方法,vuex提供了 filter,find等篩選資料的方法 狀態變更 mu...