vuex之module的使用

2022-06-18 23:48:17 字數 2457 閱讀 3324

一、module的作用

由於使用單一狀態樹,應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜時,store 物件就有可能變得相當臃腫。

為了解決以上問題,vuex 允許我們將 store 分割成模組(module)。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割:

二、module的使用方法

1、配置

//組裝模組並匯出 store 的地方

export default new vuex.store(,

});

import router from

'./router

'import store from

'./store/index

'var vm =new vue();

2、使用

export default

, mutations: ,

getters:

}

created() ,

methods:)//

this是vue例項

},}

//

有命名空間提交方式,類似this.$store.dispatch("user/getalluserlist");

}

當然,在此之前state是需要初始化的:

state:

getters: 

}

import  from 'vuex'export 

default

), }

}

這樣就可以在html中直接使用userlist屬性了。

三、action、mutation、getters的互相呼叫

1、actions中呼叫其它action

async deluser(context, object) 

},

在action中通過context.dispatch方法進行呼叫

2、getters中呼叫其它gerter

getters:,

//呼叫其它getter

getroleidlist: (state, getters) =>);

return

roleidarray

},}

getters中可以傳入第二個引數就是getters,然後通過這樣使用其它getter。當然getters也可以傳入根節點狀態和getters。

getters: ,

},

3、元件中獲取getters

(1)帶上命名空間訪問

getters['user/getuserlist']
(2)通過輔助函式訪問(推薦)

import  from 'vuex'computed: ),

}

4、元件中提交action

this.$store.dispatch('user/setrole', 

})

如果是全域性的就不需要加上區域性命名空間user

vuex深入學習 Module

vuex深入學習 module 由於使用單一狀態樹,應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜時,store 物件就有可能變得相當臃腫。為了解決以上問題,vuex 允許我們將 store 分割成模組 module 每個模組擁有自己的 state mutation action get...

Vuex入門(終章) module使用隨便講講

本文 關於module的使用,為什麼說隨便講講,因為個人覺得module的分模組本身就毫無意義,如果分模組後可以部分載入什麼的可能還有點效能上的優化,然而並沒有,事實上在本系列的第一章我就闡述了vuex的初衷 公共狀態管理。vuex被設計出來並不是為了代替vue的,他只是乙個工具而已,因此在實際使用...

Vuex原始碼中module的register方法

register 翻譯為登記 可以理解為 每乙個module都進行登記 vuex中的原始碼module collection中兩個方法 class modulecollection get path this root path 為空陣列 rawmodule 為傳入的options register...