Vuex為什么需要模塊化-創(chuàng)新互聯(lián)

這篇文章主要介紹Vuex為什么需要模塊化，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

目前成都創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設計、平橋網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一、為什么需要模塊化

前面我們講到的例子都在一個狀態(tài)樹里進行，當一個項目比較大時，所有的狀態(tài)都集中在一起會得到一個比較大的對象，進而顯得臃腫，難以維護。為了解決這個問題，Vuex允許我們將store分割成模塊（module），每個module有自己的state，mutation，action，getter，甚至還可以往下嵌套模塊，下面我們看一個典型的模塊化例子

const moduleA = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const moduleB = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
 }
})

store.state.a // moduleA的狀態(tài)
store.state.b // moduleB的狀態(tài)

二、模塊的局部狀態(tài)

模塊內(nèi)部的mutation和getter，接收的第一參數(shù)（state）是模塊的局部狀態(tài)對象,rootState

const moduleA = {
 state: { count: 0},
 mutations: {
 increment (state) {
  // state是模塊的局部狀態(tài)，也就是上面的state
  state.count++
 }
 },
 getters: {
 doubleCount (state, getters, rootState) {
  // 參數(shù) state為當前局部狀態(tài)，rootState為根節(jié)點狀態(tài)
  return state.count * 2
 }
 },
 actions: {
 incremtnIfOddRootSum ( { state, commit, rootState } ) {
  // 參數(shù) state為當前局部狀態(tài)，rootState為根節(jié)點狀態(tài)
  if ((state.cont + rootState.count) % 2 === 1) {
  commit('increment')
  }
 }
 }
}

三、命名空間（這里一定要看，不然有些時候會被坑）

上面所有的例子中，模塊內(nèi)部的action、mutation、getter是注冊在全局命名空間的，如果你在moduleA和moduleB里分別聲明了命名相同的action或者mutation或者getter（叫some），當你使用store.commit('some')，A和B模塊會同時響應。所以，如果你希望你的模塊更加自包含和提高可重用性，你可以添加namespaced: true的方式，使其成為命名空間模塊。當模塊被注冊后，它的所有getter，action，mutation都會自動根據(jù)模塊注冊的路徑調(diào)用整個命名，例如：

const store = new Vuex.Store({
 modules: {
 account: {
  namespaced: true,
  state: {...}, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的，namespaced不會有影響
  getters: {  // 每一條注釋為調(diào)用方法
  isAdmin () { ... } // getters['account/isAdmin']
  },
  actions: {
  login () {...} // dispatch('account/login')
  },
  mutations: {
  login () {...} // commit('account/login')
  },
  modules: {  // 繼承父模塊的命名空間
  myPage : {
   state: {...},
   getters: {
   profile () {...}  // getters['account/profile']
   }
  },
  posts: { // 進一步嵌套命名空間
   namespaced: true,
   getters: {
   popular () {...} // getters['account/posts/popular']
   }
  }
  }
 }
 }
})

啟用了命名空間的getter和action會收到局部化的getter，dispatch和commit。你在使用模塊內(nèi)容時不需要再同一模塊內(nèi)添加空間名前綴，更改namespaced屬性后不需要修改模塊內(nèi)的代碼。

四、在命名空間模塊內(nèi)訪問全局內(nèi)容（Global Assets）

如果你希望使用全局state和getter，roorState和rootGetter會作為第三和第四參數(shù)傳入getter，也會通過context對象的屬性傳入action若需要在全局命名空間內(nèi)分發(fā)action或者提交mutation，將{ root: true }作為第三參數(shù)傳給dispatch或commit即可。

modules: {
 foo: {
 namespaced: true,
 getters: {
  // 在這個被命名的模塊里，getters被局部化了
  // 你可以使用getter的第四個參數(shù)來調(diào)用 'rootGetters'
  someGetter (state, getters, rootSate, rootGetters) {
  getters.someOtherGetter // -> 局部的getter， ‘foo/someOtherGetter'
  rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter'
  }
 },
 actions: {
  // 在這個模塊里，dispatch和commit也被局部化了
  // 他們可以接受root屬性以訪問跟dispatch和commit
  smoeActino ({dispatch, commit, getters, rootGetters }) {
  getters.someGetter // 'foo/someGetter'
  rootGetters.someGetter // 'someGetter'
  dispatch('someOtherAction')  // 'foo/someOtherAction'
  dispatch('someOtherAction', null, {root: true}) // => ‘someOtherAction'
  commit('someMutation') // 'foo/someMutation'
  commit('someMutation', null, { root: true }) // someMutation
  }
 }
 }
}

五、帶命名空間的綁定函數(shù)

前面說過，帶了命名空間后，調(diào)用時必須要寫上命名空間，但是這樣就比較繁瑣，尤其涉及到多層嵌套時（當然開發(fā)中別嵌套太多，會暈。。）

下面我們看下一般寫法

computed: {
 ...mapState({
 a: state => state.some.nested.module.a,
 b: state => state.some.nested.module.b
 }),
 methods: {
 ...mapActions([
  'some/nested/module/foo',
  'some/nested/module/bar'
 ])
 }
}

對于這種情況，你可以將模塊的命名空間作為第一個參數(shù)傳遞給上述函數(shù)，這樣所有的綁定會自動將該模塊作為上下文。簡化寫就是

computed: {
 ...mapStates('some/nested/module', {
 a: state => state.a,
 b: state => state.b
 })
},
methods: {
 ...mapActions('some/nested/module',[
 'foo',
 'bar'
 ])
}

六、模塊重用

有時我們可能創(chuàng)建一個模塊的多個實例，例如：

創(chuàng)建多個store，他們共用一個模塊
在一個store中多次注冊同一個模塊

如果我們使用一個純對象來聲明模塊的狀態(tài)，那么這個狀態(tài)對象會通過引用被共享，導致數(shù)據(jù)互相污染。
實際上Vue組件內(nèi)data是同樣的問題，因此解決辦法也是一樣的，使用一個函數(shù)來聲明模塊狀態(tài)（2.3.0+支持）

const MyModule = {
 state () {
 return {
  foo: 'far'
 }
 }
}

以上是“Vuex為什么需要模塊化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：Vuex為什么需要模塊化-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article40/dddjeo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站內(nèi)鏈、外貿(mào)建站、虛擬主機、企業(yè)建站、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容