淺談super-vuex使用體驗(yàn)
vuex與super-vuex
super-vuex是一套用于簡化Vuex的數(shù)據(jù)架構(gòu)。
適用場(chǎng)景
在繁重的中后臺(tái)項(xiàng)目中,引入vuex的作用如下:
- 全局?jǐn)?shù)據(jù)共享,組件數(shù)據(jù)邏輯解耦
- 數(shù)據(jù)業(yè)務(wù)接口分離
- 數(shù)據(jù)模塊化管理,利于多人協(xié)作
super-vuex在這三種需求下都是和原生vuex的功能相同,在vuex原有功能上將mutation和action的定義和傳導(dǎo)機(jī)制改良為函數(shù)的寫法,在簡易數(shù)組改動(dòng)邏輯的使用上提供push、pop、shift、unshift、splice的方法,可以在與、組件中自動(dòng)地完成mutation,以及數(shù)據(jù)引用的路徑化,你可以通過load.allow去取到load模塊下的allow屬性。
使用體驗(yàn)
下面通過簡單的demo比較下原生vuex和super-vuex使用細(xì)節(jié)上的不同。
一、狀態(tài)模塊化
由于使用單一狀態(tài)樹,應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí),store 對(duì)象就有可能變得相當(dāng)臃腫。
Vuex:
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的狀態(tài) store.state.b // -> moduleB 的狀態(tài)
super-vue
自動(dòng)將mutation邏輯執(zhí)行,因此異步邏輯寫在commit中即可,相比之下節(jié)省了代碼量
import { ChildVuex } from "super-vuex"; const child = new ChildVuex('...'); child.value = { ... }; child.setCommit = {...}; const Main = new SuperVuex(); Main.setModule(child); export default Main.init();
路徑式獲取子模塊數(shù)據(jù)
數(shù)據(jù)路徑,在之后的所有方法中,數(shù)據(jù)路徑至關(guān)重要,它是一個(gè)數(shù)據(jù)的直觀路徑字符串,也就是上面[ChildVuex].value 數(shù)據(jù)定義的數(shù)據(jù)路徑。
'load.allow'
可以取到load模塊的allow屬性
二、操作方法
super-vuex的操作方法上告別了以往同步數(shù)組操作的繁雜過程,比如在以往的vuex模式中實(shí)現(xiàn)一個(gè)對(duì)數(shù)組的操作是效率偏低的,先在mutation中定義方法操作,后在action中commit或是在組件中commit,super-vuex很好的解決了這個(gè)問題,提供了一系列基礎(chǔ)的數(shù)組操作方法讓你操作數(shù)組非常簡單。
Vuex:
// 提交一個(gè)commit store.commit({ type: 'increment', amount: 10 }) mutations: { // push increment (state, n) { state.arr = = [...state.arr, n] } // pop popArr(state) { state.arr = arr.pop() } // shift shiftArr(state) { state.arr.shift() } // unshift unshift(state) { state.arr.unshift('students', { name: 'huaping1', age: 302 }) } // deleteStudent deleteStudent(state) { state.arr.splice('students', 0, 1); }, } ...
super-vuex:
super-vuex在commit這層提供了一系列的操作api,提高了數(shù)據(jù)傳遞的效率
child.setCommit('increment', (state, n) => { state.count += n; }); changeName() { this.$store.user.commit('name', 'someone'); }, changeAllow() { this.$store.user.commit('load.allow', false); }, pushStudent() { this.$store.user.push('students', { name: 'huaping', age: 300 }); }, pushSubs() { this.$store.sub.push('subs', 10); }, popSubs() { this.$store.sub.pop('subs'); }, unshiftStudent() { this.$store.user.unshift('students', { name: 'huaping1', age: 302 }); }, shiftStudent() { this.$store.user.shift('students') }, deleteStudent() { this.$store.user.splice('students', 0, 1); }, gets() { his.$store.user.dispatch('load.data'); }
方法列表function
- get(name):獲取一個(gè)getter屬性;例:store.sub.get('subs')
- commit(name, data):提交處理一個(gè)屬性;例:store.user.commit('age', data)
- push(name, ...data):提交一個(gè)數(shù)據(jù)的push行為
- pop(name):提交一個(gè)數(shù)據(jù)的pop行為
- unshift(name, ...data):提交一個(gè)數(shù)據(jù)的unshift行為
- shift(name): 提交一個(gè)數(shù)據(jù)的shift行為
- splice(name, arguments):用法同Array.prototype.splice
- dispatch(name, data):個(gè)async/await型的調(diào)用函數(shù)。與Vuex中的dispatch一致,用于出發(fā)setAction定義的行為
不僅如此,super-vuex還提供自定義模式可以覆蓋掉默認(rèn)給你提供的api,
child.setPushCommit(path, callback<(state, data)>); child.setUnShiftCommit(path, callback<(state, data)>); child.setPopCommit(path, callback<(state)>); child.setShiftCommit(path, callback<(state)>); // 注意splice使用方法,在`data`中是一個(gè)數(shù)組 child.setSpliceCommit(path, callback<(state, data)>);
- [ChildVuex].setPushCommit 數(shù)組的push操作行為
- [ChildVuex].setUnShiftCommit 數(shù)組的unshift操作行為
- [ChildVuex].setSpliceCommit 數(shù)組的splice操作行為
- [ChildVuex].setPopCommit 數(shù)組的pop操作行為
- [ChildVuex].setShiftCommit 數(shù)組的Shift操作行為
三、Getter
在組件內(nèi)使用store中的數(shù)據(jù),vuex通常是把getter放入computed中,使組件產(chǎn)生數(shù)據(jù)響應(yīng)。
Vuex:
const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } }) // in component computed: { // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) }
super-vuex:
this.store.doneTodos.get('todos')
非常簡約地完成getter,響應(yīng)式getter
當(dāng)然想使用原生的getter也是OK的,輔助方法adjFunction(對(duì)ChildVuex自動(dòng)生成的屬性進(jìn)行覆蓋或自定義)
[ChildVuex].setGetter(path, cb)
自定義或覆蓋模塊中相應(yīng)getter的屬性,相當(dāng)于原生vuex的getter屬性。
覆蓋原有的getter
child.setGetter('load.total', state => { return state.load.total + 100; }); /* 調(diào)用$store.user.get('load.total') * 返回 200 */
@cevio github
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3表單組件el-form校驗(yàn)規(guī)則rules屬性示例詳解
在el-form中正確使用rules校驗(yàn)是非常重要的,rules使用不當(dāng)容易出現(xiàn)規(guī)則不生效、規(guī)則一直被觸發(fā)等各種現(xiàn)象,這篇文章主要給大家介紹了關(guān)于Vue3表單組件el-form校驗(yàn)規(guī)則rules屬性的相關(guān)資料,需要的朋友可以參考下2024-08-08vue3中使用keepAlive緩存路由組件不生效的問題解決
這篇文章主要介紹了vue3中使用keepAlive緩存路由組件不生效的問題解決,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-06-06Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁切換
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁的切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無法加載頁面的問題及解決
這篇文章主要介紹了vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無法加載頁面的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會(huì)有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當(dāng)前時(shí)間是一項(xiàng)常見的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時(shí)間,需要的朋友可以參考下2024-01-01vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能
這篇文章主要介紹了vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù),對(duì)vue感興趣的同學(xué),可以參考下2021-04-04vue使用window.open()跳轉(zhuǎn)頁面的代碼案例
這篇文章主要介紹了vue中對(duì)window.openner的使用,vue使用window.open()跳轉(zhuǎn)頁面的代碼案例,本文通過實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-11-11