一、vuex的理解
????????vuex簡單說就是全局狀態管理的,項目中常常需要有幾個參數所有組件都要用,或者同級組件之間的數據傳遞和通信。此時使用vuex非常方便開發。
二、前期準備
1.下載vuex-------------------npm install vuex
2.在src文件夾----->新建store文件夾--------->新建index.js文件
3.在main.js里面引入store并全局注入
所有組件里面使用this.$store了。到此,準備工作已經完成。
三、VUEX的使用
1.在index.js里面的store里面寫入三個對象,state,action,mutations。state用于定義狀態,action異步更新狀態,mutations同步更新狀態。
下面,我們先來實現一個最簡單的vuex。
好,定義好更新的函數了,我們在組件里面用dispatch將數據保存到vuex的狀態里面。
有沒有覺得框中這倆函數看著是不是和actions兩個函數名是一樣的,沒錯,通過dispatch調用actions中的同名函數,并把變量name中的數值傳給action,很像函數調用有木有,然后action的函數里用commit調用,觸發mutations,發現沒有,commit里面的函數名又和mutations是一樣的,觸發mutations后又將action的name數據傳給mutations了,mutations給保存到vuex的狀態里面了。
2.既然vuex里面有數據,那么我要在另一個組件中怎么拿道vuex里面的狀態呢?很簡單。
額,這樣就算是把狀態從vuex給巴拉下來了。通過this.$store.state就可拿到狀態了。
現在真是體會到創作不易了,艾瑪,寫的還挺累,各位看官看明白了嗎?這是最簡單的使用了,下期更新有getters和computed的vuex。