首頁  >  文章  >  web前端  >  vuex有什麼屬性

vuex有什麼屬性

青灯夜游
青灯夜游原創
2022-03-03 17:40:408194瀏覽

vuex的屬性有:1、state,用來儲存變數;2、mutations,提交更新資料的方法;3、actions,用來解決非同步流程來改變state資料;4、getters,對state裡面的變數進行過濾的;5、modules。

vuex有什麼屬性

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

Vuex 是什麼?

Vuex 是專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式變更。 Vuex 也整合到 Vue 的官方調試工具 devtools extension,提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

Vuex裡面有五個特別重要的屬性,分別是state,mutations,actions,getters,modules。

vuex的五個屬性

#1.state

放置狀態相關的訊息, vue是使用單一狀態樹的,也就是單一資料來源,也就是說我們的state只能有一個

vuex有什麼屬性

2.mutations

#mutations其實相當於我們vue裡面的methods,也是定義方法的,只不過這個方法可以在多個元件呼叫就是了。

vuex有什麼屬性

他是這樣子呼叫的:使用我們的commit

vuex有什麼屬性

最後在使用就行了:

vuex有什麼屬性

3.actions

mutations是寫同步運算的,在他裡面是無法寫非同步操作的,那我們就需要在actions裡面來寫我們的非同步操作。而寫非同步操作的話,呼叫的話就不是使用commit了,二十使用我們的dispatch

vuex有什麼屬性

vuex有什麼屬性

vuex有什麼屬性

如上圖所示,我們先在mutations裡面寫好我們的方法,然後再actions裡面寫好非同步操作,然後呼叫我們在mutations裡面寫好的方法,然後回到我們的元件,在元件裡面使用我們的dispatch就可以了。

4.getters

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

vuex有什麼屬性
vuex有什麼屬性

5.modules

vuex有什麼屬性

vuex有什麼屬性

vuex有什麼屬性

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

(學習影片分享:vuejs教學web前端

以上是vuex有什麼屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn