學習Vuex 的Module 與Getter - Medium

在前面有提到: 可以將store 物件切分多個模組，並讓每個模組都擁有自己的state, mutation, action, getter，所以將資料夾的結構建立如圖：. 透過 modules. UpgradeOpeninappHomeNotificationsListsStoriesWritePublishedinkids5346學習Vuex的Module與Getter在vuex中透過Module與Getter主要是想要達成兩個目的:Module：改善因為狀態變多導致store物件變得過於臃腫的情況，將store物件切分多個模組，並讓每個模組都擁有自己的state,mutation,action,getter，更易於管理。

Getter:將store中的state轉換成元件需求的資料，並在元件中可以使用，可以認為是store物件的計算屬性。

接著來看看Module與Getter的基礎使用吧。

使用Module切分store物件在前面有提到:可以將store物件切分多個模組，並讓每個模組都擁有自己的state,mutation,action,getter，所以將資料夾的結構建立如圖：透過modules.js作為每一個模組的進入點。

資料夾結構:每一個modules.js檔案這邊需要注意的是，即使透過模組切分store物件，但預設情況下，模組中的action,mutation,getter是註冊在全域的命名空間，這意味者如果模組中有相同的命名就會報錯。

會提示duplicategetterkey:的訊息。

對於Module設定命名空間(namespace)為了避免這種事情的發生，vuex提供了對於模組設定命名空間的一種簡單方式，只要在每一個模組中加入namespaced:true，如此以來就可以建立各模組的獨特空間。

例如有一個被拆分的模組：//testFolder/modules.jsimportstatefrom'./store/state';importgettersfrom'./store/getters';importactionsfrom'./store/actions';importmutationsfrom'./store/mutations';exportdefault{namespaced:true,state,getters,actions,mutations}這個模組中的getters://getters.jsexportdefault{getMsg:state=>state.msg,}在component中使用這個模組中的getters(這邊先使用後面會提到的mapGetters)//componentcomputed:{...mapGetters({getMsg:'testFolder/getMsg'})}在元件中使用時namespaced:true，vuex會自動幫所有getters、actions及mutations進行路徑調整命名。

而這也同時讓我們不用再對於每一個屬性添加以空間為命名的前綴來區分是哪個模組使用的屬性。

如何在設定命名空間後，調用其他模組中的方法當設定命名空間後，如果想要取得其他模組的方法，分為兩種方式：state/getter:透過將rootState,rootGetters當作第三、第四個參數傳遞。

action/mutation:透過將{root:true}當作第三個參數傳遞首先是state/getter的方式：//testmodule中的statestate:{msg:'testmodules',}//test2module中的state與gettersstate:{msg:'test2modules',},getters:(state,getters,rootState,rootGetters)=>{letmsgFromOtherModules=rootState.test.msg;//state.msg:test2module//msgFromOtherModules:testmodulereturnstate.msg+msgFromOtherModules;}透過rootState,rootGetters告訴vuex我們想要調用其他模組的state,getter接下來是action/mutation:假設一個使用情境:在testmodule中，當actions被調用時，在actions中調用test2module中的mutations://testmodule中的actiontestOneAction(context){context.commit('testTwoMutation',null,{root:true})}//test2module中的mutationstestTwoMutation(state,payload){console.log(state,payload);}透過{root:true}的方式，告訴vuex我們想要使用其他模組的action,mutation。

關於Module的學習先暫時告一個段落，後續如果有更深入的應用再回過來學習。

使用Getter在vuex中轉換資料狀態在官方文件中提到，Getter可以視為store的computed屬性就好比在component中data的computed屬性。

接著來看看如何在component中使用vuex的Getter透過store.getters在component中調用如果有設定getters時，我們可以在component中調用：getters:{doneTodos:state=>returnstate.todo.filter(todo=>todo.done)}computed:{doneTodos():{returnthis.$store.getters.doneTodos}}這邊可以知道Getter接受state作為第一個參數。

Getter接受其他getter作為第二個參數getters:{doneTodos:state=>state.todo.filter(todo=>todo.done)otherTodos:(state,getters)=>getters.doneTodos};Getter返回一個函式，實現給getter傳遞參數Getter可以回傳一個函式，並讓我們在component中將參數入並運算。

getters:{getId:state=>id=>returnid}computed:{getCurrentId(id):{returnthis.$store.getters.getId(id)}}使用輔助函式mapGettersvuex提供mapGetters的方式，將store中getter中的屬性直接可以作為元件的computed屬性使用。

有兩種方式調用：getters:{doneTodos:state=>state.todo.filter(todo=>todo.done)otherTodos:(state,getters)=>getters.doneTodos};第一種:computed:{...mapGetters(['doneTodos','otherTodos'])}第二種：可以自訂getter屬性的名稱computed:{...mapGetters({'doneTodos':'newDoneTodos','otherTodos':'newOtherTodos'})}Morefromkids5346最好的投資就是投資自己。

Investinginyourselfisthebestinvestment.Readmorefromkids5346GetstartedPenghuaChen4Followers最好的投資就是投資自己。

InvestinginyourselfisthebestinvestmentFollowRelateduntitledapoemTestdragmapDownloadreferencegenomeDay318 — November14th2021TheCavesofAndrozaniPartsThreeandFourSelfCheckoutsSelf-checkoutsmarkedthedawnofanewera.HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable