vuex
VueX是適用于在Vue項(xiàng)目開發(fā)時(shí)使用的狀態(tài)管理工具。試想一下,如果在一個(gè)項(xiàng)目開發(fā)中頻繁的使用組件傳參的方式來同步data中的值,一旦項(xiàng)目變得很龐大,管理和維護(hù)這些值將是相當(dāng)棘手的工作。為此,Vue為這些被多個(gè)組件頻繁使用的值提供了一個(gè)統(tǒng)一管理的工具——VueX。在具有VueX的Vue項(xiàng)目中,我們只需要把這些值定義在VueX中,即可在整個(gè)Vue項(xiàng)目的組件中使用。
一,state 負(fù)責(zé)狀態(tài)管理,類似于vue中的data,初始化數(shù)據(jù)
二,mutation 專用于修改state中的數(shù)據(jù),通過commit觸發(fā)
三,action 可以處理異步,通過dispatch觸發(fā),不能直接修改state,首先在組件中通過dispatch觸發(fā)action,
然后在action函數(shù)內(nèi)部commit觸發(fā)mutation,通過mutation修改state狀態(tài)值
四,getter Vuex中的計(jì)算屬性,相當(dāng)于vue中的computed,依賴于state狀態(tài)值,狀態(tài)值一旦改變,getter會(huì)重新計(jì)算,
也就是說,當(dāng)一個(gè)數(shù)據(jù)依賴于另一個(gè)數(shù)據(jù)發(fā)生變化時(shí),就要使用getter
五,module 模塊化管理
使用
安裝vuex
- 使用npm下載:
npm install vuex --save - 使用vue-cli構(gòu)建項(xiàng)目時(shí)選擇使用vuex
- 創(chuàng)建store文件夾,目錄結(jié)構(gòu)如下:
![]()
-
2.創(chuàng)建index.js,代碼結(jié)構(gòu)如下:
-
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
posted on 2021-08-16 20:37 簡單小朋友 閱讀(78) 評(píng)論(0) 收藏 舉報(bào)














浙公網(wǎng)安備 33010602011771號(hào)