多元件資料共享——狀態管理 vuex

語言: CN / TW / HK

靡不有初,鮮克有終

不積跬步無以至千里

1、概念👀

vue中實現集中式狀態(資料)管理的一個vue外掛,對vue應用中多個元件的共享狀態進行集中式的管理(讀/寫),也是一種元件間通訊的方式,且適用於任意元件間通訊。

2、何時使用✔

多個元件需要共享資料時使用;

🟢Note:

1、共享:

a、多個元件依賴於統一狀態;

b、來自不同的元件的行為需要變更同一狀態。

2、雖然可以通過全域性事件匯流排實現多元件資料共享,但是元件中需要不斷的派發和監聽,比較的麻煩和難以維護,見下:

圖片.png 3、使用vuex進行統一管理,不同的元件可以對資料可以進行雙向操作,優雅高效,見下:

圖片.png

3、vuex的工作原理圖👇

圖片.png

🟢值得注意的地方:

1、Actions並非多此一舉:

當你明確知道需要傳遞的引數值時,在程式碼中確實是可以跳過dispatch派發位於Actions中的某一個函式的這個操作,直接通過 commit 去觸發Mutations內部對應的函式進行處理對應的邏輯達到一樣的效果;

但是如果這個引數需要通過呼叫介面等非同步操作才能知道或者有一定的業務邏輯條件判斷,Actions就是必不可少的,因為業務邏輯操作最好是在Actions裡面編碼;

2、綠色虛線內的vuex的三個重要部分,是由store進行管理,因為dispatchcommitmutate這三個API是由store提供的;

3、所有操作能夠正常進行的前提:所有的元件都有或者都能看見store物件;

4、搭建vuex的環境🚴‍♀️

環境的搭建方式多種多樣,比如:

1、你可以通過腳手架的UI介面直接手動配置vuex並且建立專案;

2、或者通過npm在你已有的專案中進行安裝,再通過Vue.use(Vuex)註冊進行使用,建立一個這樣的檔案:

圖片.png

🟢Note:

圖中綠色箭頭處的Vue.use(Vuex)程式碼之所以要寫在store/index.js下,是因為如果直接寫在main.js檔案之中會出現[vuex] must call Vue.use(Vuex) before creating a store instance.的報錯,具體原因:main.jsimport匯入的程式碼會統一優先執行——腳手架本身的執行機制,掃描當前檔案的所有程式碼,import匯入的程式碼會直接提到最前方;

3、...

5、實戰🚀

🟢Note:

由於vuex可操作性較多,文章不好一一描述,將所涉及程式碼(有清晰的註釋說明)已上傳至Gitee上面且已開源,有興趣細看的朋友麻煩自取一下;

傳送門:https://gitee.com/tu_song/vuex_test

圖片.png

6、小結🌊

1、四個map方法的使用

1.1、mapState

用於幫助我們對映state中的資料為計算屬性

js computed: {    //藉助mapState生成計算屬性:sum、school、subject(物件寫法)     ...mapState({sum:'sum',school:'school',subject:'subject'}),            //藉助mapState生成計算屬性:sum、school、subject(陣列寫法)    ...mapState(['sum','school','subject']), },

1.2、mapGetters

用於幫助我們對映getters中的資料為計算屬性

js computed: {    //藉助mapGetters生成計算屬性:bigSum(物件寫法)    ...mapGetters({bigSum:'bigSum'}), ​    //藉助mapGetters生成計算屬性:bigSum(陣列寫法)    ...mapGetters(['bigSum']) },

1.3、mapActions

用於幫助我們生成與actions對話的方法,即:包含$store.dispatch(xxx)的函式

js methods:{    //靠mapActions生成:incrementOdd、incrementWait(物件形式)    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) ​    //靠mapActions生成:incrementOdd、incrementWait(陣列形式)    ...mapActions(['jiaOdd','jiaWait']) }

1.4、mapMutations

用於幫助我們生成與mutations對話的方法,即:包含$store.commit(xxx)的函式

js methods:{    //靠mapActions生成:increment、decrement(物件形式)    ...mapMutations({increment:'JIA',decrement:'JIAN'}),        //靠mapMutations生成:JIA、JIAN(物件形式)    ...mapMutations(['JIA','JIAN']), }

備註:mapActions與mapMutations使用時,若需要傳遞引數需要:在模板中繫結事件時傳遞好引數,否則引數是事件物件。

2、開啟模組化+名稱空間

2.1、目的:

讓程式碼更好維護,讓多種資料分類更加明確,修改store.js檔案:

js const countAbout = {  namespaced:true,//開啟名稱空間  state:{x:1},  mutations: { ... },  actions: { ... },  getters: {    bigSum(state){       return state.sum * 10   } } } ​ const personAbout = {  namespaced:true,//開啟名稱空間  state:{ ... },  mutations: { ... },  actions: { ... } } ​ const store = new Vuex.Store({  modules: {    countAbout,    personAbout } })

2.2、讀取state資料

(開啟名稱空間後的元件中)

js //方式一:自己直接讀取 this.$store.state.personAbout.list //方式二:藉助mapState讀取: ...mapState('countAbout',['sum','school','subject']),

2.3、讀取getters資料

(開啟名稱空間後的元件中)

js //方式一:自己直接讀取 this.$store.getters['personAbout/firstPersonName'] //方式二:藉助mapGetters讀取: ...mapGetters('countAbout',['bigSum'])

2.4、呼叫dispatch

(開啟名稱空間後的元件中)

js //方式一:自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二:藉助mapActions: ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

2.5、呼叫commit

(開啟名稱空間後的元件中)

js //方式一:自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二:藉助mapMutations: ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

3、其他✨

3.1、NanoID——隨機id生成庫:

傳送門:https://zhuanlan.zhihu.com/p/387924041

具體使用:

你所需要做的就是使用npm i nanoid命令安裝NanoID NPM庫,並在你的專案中使用它

js import { nanoid } from 'nanoid'; id = nanoid();

3.2、返回任意文案介面:

傳送門:https://api.uixsj.cn/hitokoto/get?type=social

🚀🚀🚀此文章主要用於個人的練習記錄,不足之處,請多多斧正!