vue之vuex的五個屬性

1.官方解釋

Vuex是一個專爲Vue.js應用程序開發的狀態管理模式。然後Vuex裏面有五個特別重要的屬性,分別是state,mutations,actions,getters,modules。

2.state

放置狀態相關的信息,vue是使用單一狀態樹的,也就是單一數據源,也就是說我們的state只能有一個
在這裏插入圖片描述

3.mutations

mutations其實就相當於我們vue裏面的methods,也是定義方法的,只不過這個方法可以在多個組件調用就是了。
在這裏插入圖片描述
他是這樣子調用的:使用我們的commit
在這裏插入圖片描述
最後在使用就行了:
在這裏插入圖片描述

4.actions

mutations是寫同步操作的,在他裏面是不能寫異步操作的,那我們就需要在actions裏面來寫我們的異步操作。並且寫異步操作的話,調用的話就不是使用commit了,二十使用我們的dispatch
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
如上圖所示,我們首先在mutations裏面寫好我們的方法,然後再actions裏面寫好異步操作,然後調用我們在mutations裏面寫好的方法,然後回到我們的組件,在組件裏面使用我們的dispatch就可以了。

5.getters

getters其實就是相當於vue裏面的計算屬性,我們在這個裏面使用的都是一些計算的方法,使用起來也是蠻簡單的,只需要在組件裏面直接使用就好了。操作如下圖。
在這裏插入圖片描述
在這裏插入圖片描述

6.modules

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
最後一個就是我們的modules,就是模塊化的意思,因爲是單一狀態樹,怕我們在state裏面寫的東西太多了,不好進行查找,那我們可以在我們的modules裏面重新定義我們的一個模塊,就是相當於一個store,裏面也有我們所需要的五個屬性,所進行的操作也是一樣的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章