詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
了解vuex的朋友都知道它是vue用來集中管理狀態(tài)的容器,如果了解過Reduce的朋友可能看見他時(shí)就會(huì)非常熟悉,都是用來管理全局的狀態(tài)的,實(shí)現(xiàn)不同組件之間相互的數(shù)據(jù)訪問。這里我們不介紹vuex,主要介紹vuex拆分store以及多模塊管理。我們知道如果一個(gè)項(xiàng)目非常大的話狀態(tài)就會(huì)非常的多,如果不進(jìn)行分類處理,所有的狀態(tài)都維護(hù)在一個(gè)state里面的話,狀態(tài)管理就會(huì)變得非常的混亂,這樣非常不利于項(xiàng)目的后期維護(hù)。我們現(xiàn)在前端推崇模塊化開發(fā),為的就是提高開發(fā)效率和維護(hù)效率,避免重復(fù)工作。那么vuex是怎么樣解決這個(gè)問題的呢?這個(gè)時(shí)候我們今天要講的主角modules就要閃亮登場了。
其實(shí)這個(gè)用起來是非常簡單的,正常情況下,我們?cè)谟胿uex的時(shí)候我們是這樣定義的:
states.js //保存應(yīng)用的狀態(tài)值
export default { bookList:["西游記","水滸傳","紅樓夢(mèng)","三國演義"] }
mutations.js //在這個(gè)文件中定義對(duì)狀態(tài)值的操作,增刪改查。
export default {//這里要注意不要在mutations里面進(jìn)行異步操作 ADD_BOOK(state,book){ state.bookList.push(book); return true; }, DELETE_BOOK(state,id){ } }
getters.js //將我們?cè)趕tates中定義的值暴露在store.getters對(duì)象中,便于我們?cè)诮M件中可以通過store.getters對(duì)象中,便于我們?cè)诮M件中可以通過store.getters.bookList訪問數(shù)據(jù)
export default { bookList:function(state){ return state.bookList; } }
actions.js //其實(shí)這里定義的方法只是將mutation.js中定義的方法進(jìn)行了一次封裝,就是去觸發(fā)mutations.js中的方法。如果傳如的參數(shù)需要異步獲取的話,我們可以在這里等待異步返回成功后在觸發(fā)mutations中的方法。在組件中這兩個(gè)文件定義的方法都可以直接調(diào)用,mutations中定義的方法是通過store.dispath(′ADDBOOK′,book)調(diào)用的,而actons定義的方法是通過store.dispath(′ADDBOOK′,book)調(diào)用的,而actons定義的方法是通過store.commit(‘ADD_BOOK',book),調(diào)用的。
export default {//在action中可以進(jìn)行異步操作。 add_book({commit},book){ commit('ADD_BOOK',book); }, delete_book({commit},book){ commit('DELETE_BOOK',id); } }
這里有時(shí)我們還可能會(huì)看見一個(gè)文件叫mutations_type.js其實(shí)這個(gè)文件定義的是mutations中的方法名,我自己在用的時(shí)候反正沒定義這個(gè)文件,自己看著辦如果喜歡你就定義上。
上面定義的文件定義好了之后,我們就可以將我們定義的這些對(duì)象加入到vuex的Store中去了
store.js
import vue from 'vue' import vuex from 'vuex' import states from './state.js' import mutatons from './mutations.js' import actons from './actions.js' import getters from './getters' vue.use(vuex); export default new vuex.Store({ ststes, mutatons, getters, actions });
這樣我們就寫完整了一個(gè)store了。我們可以看出這里我們只有一個(gè)總模塊,那如果我們要將總模塊拆分成幾個(gè)小模塊,那應(yīng)該怎樣定義呢?
import vue from 'vue' import vuex from 'vuex' import states from './state.js' import mutatons from './mutations.js' import actons from './actions.js' import getters from './getters' vue.use(vuex); export default new vuex.Store({ modules:{ mod1:{ states, mutatons, getters, actions }, mod2:{} } });
import vue from 'vue' import vuex from 'vuex' import states from './state.js' import mutatons from './mutations.js' import actons from './actions.js' import getters from './getters' vue.use(vuex); export default new vuex.Store({ modules:{ mod1:{states, mutatons, getters, actions }, mod2:{} } });
我自己在做項(xiàng)目的時(shí)候我一般將一個(gè)子模塊的state,mutations,actions,getter寫在一個(gè)文件中如:
mod1.js
export default { state:{}, mutatons:{}, actions:{}, getters:{} }
mod2.js
export default { state:{}, mutatons:{}, actions:{}, getters:{} }
然后在將幾個(gè)mod合并到store中去:
import vue from 'vue' import vuex from 'vuex' import mod1 from './mod1.js' import mod2 from './mod2.js' vue.use(vuex); export default new vuex.Store({ modules:{ mod1:mod1, mod2:mod1 } });
我感覺這樣寫的話代碼結(jié)構(gòu)更加直觀,清晰。而且正常的話一個(gè)子模塊一般不會(huì)有太多的狀態(tài)和方法。當(dāng)然如果項(xiàng)目中子模塊的狀態(tài)和方法確實(shí)太多,我們還是推薦將state,actions,getters,mutations單獨(dú)寫在不同的文件中,然后將不同的子模塊的這些文件放在一個(gè)文件夾中,這樣就代表一個(gè)子狀態(tài)管理模塊。
通過將總的store拆分過后,我們?cè)跔顟B(tài)管理和維護(hù)的時(shí)候就更加清晰了。
在創(chuàng)建出store后,我們需要將store掛載到vue上去
import vue from 'vue' import store from './store' var vue = new Vue({ store, ···· }).$mount("#app")
之后在組建中就可以使用和管理前面定義的狀態(tài)了,
<template> </template> <script> export default{ computed{ bookList:this.$store.mod1.bookList, }, methods:{ addBook:book=>this.$store.mod1.commit('ADD_BOOK',book);//這里需要注意,如果你是用了子模塊的這種方法你需要加上模塊名這是mod1,如果沒有就不需要加。 deleteBook:id=>this.$store.mod1.disaptch('DELETE_BOOK',id); } } </script>
總結(jié):
將store進(jìn)行拆分,有利于我們更好的管理項(xiàng)目中的狀態(tài),以及使我們的項(xiàng)目維護(hù)更加加單高效。各個(gè)模塊之間的開發(fā)互相不影響。
好了,這次就簡單的介紹到這里,這次主要是介紹怎么用。并沒有深入到他的實(shí)現(xiàn)原理,對(duì)于vue的涉世未深的人來說,我感覺還是夠用了。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用ref獲取dom結(jié)果為'null'的原因詳析
這篇文章主要給大家介紹了關(guān)于vue3使用ref獲取dom結(jié)果為'null'的原因詳析,ref是Vue3中一個(gè)非常重要的功能,它可以用來獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對(duì)DOM節(jié)點(diǎn)的操作,需要的朋友可以參考下2023-07-07一篇文章,教你學(xué)會(huì)Vue CLI 插件開發(fā)
這篇文章主要介紹了Vue CLI插件開發(fā),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue項(xiàng)目前端錯(cuò)誤收集之sentry教程詳解
Sentry 是一個(gè)開源的錯(cuò)誤追蹤工具,可以幫助開發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。這篇文章主要介紹了vue項(xiàng)目前端錯(cuò)誤收集之sentry,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue3如何使用vant-picker封裝省市二級(jí)聯(lián)動(dòng)
這篇文章主要介紹了vue3如何使用vant-picker封裝省市二級(jí)聯(lián)動(dòng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容
這篇文章主要介紹了基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06