1、vuex簡介以及創(chuàng)建一個(gè)簡單的倉庫

vuex是專門為vue框架而設(shè)計(jì)出的一個(gè)公共數(shù)據(jù)管理框架，任何組件都可以通過狀態(tài)管理倉庫數(shù)據(jù)溝通，也可以統(tǒng)一從倉庫獲取數(shù)據(jù)，在比較大型的應(yīng)用中，數(shù)據(jù)交互龐大的情況下，推薦使用vuex管理。Vuex狀態(tài)管理有五個(gè)核心的概念，分別為state、getters、actions、mutations、modules,接下來，將一起來研究一下這五個(gè)對(duì)象的具體使用，在此之前我們先在src文件下創(chuàng)建一個(gè)狀態(tài)管理文件夾store，創(chuàng)建index.js文件(注：下圖是在項(xiàng)目中更改，不要被其他代碼干擾，關(guān)注標(biāo)記就行了)

在main.js中引用并在vue實(shí)例中注冊(cè)

接下來我們?cè)趇ndex.js中創(chuàng)建一個(gè)簡單的狀態(tài)管理，并在其他組件中獲取和更改：

如上圖便是一個(gè)最基礎(chǔ)的狀態(tài)管理，用到了剛剛五個(gè)屬性中的兩個(gè)，接下來我們來解析一下代碼，首先引入vue以及vuex，并在vue中使用，然后創(chuàng)建一個(gè)store實(shí)例。然后我們來說一下兩個(gè)屬性，第一個(gè)為state，它是一個(gè)對(duì)象，它的的作用相當(dāng)于倉庫的容器，用來儲(chǔ)存所有公共數(shù)據(jù)；第二個(gè)為mutations，它也是一個(gè)對(duì)象，對(duì)象里面是一個(gè)一個(gè)的方法，這些方法說白了就是來儲(chǔ)存和改變state里面的數(shù)據(jù)；關(guān)于基礎(chǔ)的狀態(tài)管理我們就了解完了，接下來我們?cè)诮M件中去獲取和改變狀態(tài)管理中的數(shù)據(jù)；

我們?cè)趍ounted函數(shù)中獲取到了狀態(tài)管理數(shù)據(jù)，結(jié)果為null，因?yàn)槲覀兌x的就是null，下面我們來改變狀態(tài)管理中的treeData值；

我們通過store的commit方法提交改變狀態(tài)值，第一個(gè)參數(shù)為mutations里面的方法名，第二個(gè)參數(shù)為要改變的數(shù)據(jù)值，改變后立馬獲取就能得到改變后的值，一般多用在多組件之間的通信和數(shù)據(jù)共享。以上就是創(chuàng)建一個(gè)基本的狀態(tài)管理庫

2、vuex的模塊化管理

想象一下，如果管理數(shù)據(jù)多了起來，index.js也將變成一個(gè)數(shù)據(jù)龐大的文件，難以維護(hù)，而且還有一些復(fù)雜的需求也難以滿足，這個(gè)時(shí)候我們就想起了模塊化管理，是的，狀態(tài)管理也提供了模塊化管理，這就是五個(gè)概念中的modules，它的出現(xiàn)便是為了模塊化管理，下面我們?cè)趕tore文件夾下面構(gòu)建modules文件夾，用來存放模塊js文件。

下面是我們index.js改變的代碼

下面是test.js中的代碼

上面結(jié)構(gòu)就是最基本的模塊化狀態(tài)管理，當(dāng)然在組件的獲取方式也得改變，代碼如下

如上圖就是模塊化管理的獲取方式；

3、vuex中的actions和getters

五個(gè)重要概念中還剩下getters、actions這兩個(gè)概念，我們先說actions吧，actions和mutations非常接近，都是用來處理state中的數(shù)據(jù)，但是它可以異步處理，而mutations中只能同步，但是actions卻不能直接處理state中的數(shù)據(jù)，它必須借助mutations里面的函數(shù)，所以一定要記住，能改變state中數(shù)據(jù)的方法，只有mutations可以做到。

那么我們現(xiàn)在來探討一下mutations為什么不能異步！！！先上代碼

現(xiàn)在我們把賦值state值改為異步，然后再來獲取一下

結(jié)果為兩個(gè)null，因?yàn)闋顟B(tài)是實(shí)時(shí)獲取的，而獲取到的時(shí)候異步還沒開始執(zhí)行，所以都為null。這樣就不能實(shí)時(shí)的改變獲取數(shù)據(jù)，導(dǎo)致數(shù)據(jù)獲取總是“慢了一拍”，實(shí)際需求中需要從狀態(tài)管理中調(diào)取接口從后臺(tái)獲取數(shù)據(jù)，而接口都是異步的函數(shù)，那怎么辦呢？所以actions的出現(xiàn)就是為了解決這個(gè)疑難雜癥的，讓我們來操作一番。上代碼：

在test對(duì)象中加入actions對(duì)象，對(duì)象里面的函數(shù)其實(shí)就是對(duì)數(shù)據(jù)進(jìn)行操作后再提交到狀態(tài)管理mutations里面來改變數(shù)據(jù)，這里多用于異步操作，比如在函數(shù)請(qǐng)求后臺(tái)數(shù)據(jù)后返回組件頁面(不推薦)或者異步改變狀態(tài)管理里面的值，它多用于和另外的一個(gè)概念一起配合使用，那就是getters屬性，getters屬性相當(dāng)于組件的computed屬性，它可以處理和緩存state中的數(shù)據(jù)，當(dāng)state中有更新的時(shí)候它也會(huì)跟著更新，接下來我們來部署getters，首先在store創(chuàng)建getters.js文件

getters.js代碼，getters需要在store中注冊(cè)；

這里我們過濾上面我們改變的數(shù)據(jù)，一律改為“我是阿格斯之盾”，接著在剛剛輸出的地方打印出來看看：

這里獲取getters里面的屬性值的方法可以直接通過getters暴露給store的屬性中直接獲取

4、vuex中的輔助函數(shù)

這里我們只說mapState函數(shù)，其他函數(shù)都和它類似，感興趣的小伙伴可以自行了解喲

mapState輔助函數(shù)

當(dāng)一個(gè)組件需要同時(shí)獲得多個(gè)狀態(tài)的時(shí)候，為每個(gè)狀態(tài)去聲明顯得代碼臃腫，這個(gè)時(shí)候就得用到mapState函數(shù)了：

先在組件中導(dǎo)入mapState函數(shù)

然后在computed中導(dǎo)入mapState函數(shù)，這里用的是擴(kuò)展運(yùn)算符，然后就可以在函數(shù)中直接獲取到test狀態(tài)里面的所有數(shù)據(jù)了，其他的幾個(gè)輔助函數(shù)都和這個(gè)差不多，感興趣的小伙伴自行了解一下吧，學(xué)無止境，喜歡就點(diǎn)個(gè)贊吧~

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。