Vuex動態註冊module

最近公司在開發的一個專案在開發完核心功能之後，上頭似乎對這個專案有了些想法，開始提出進一步的需求。

也因為逐漸增加的需求，從本來不需要Vuex、到引入Vuex;再到Vuex單一個store已經好幾百行;(實現各個需求的state, mutations, actions都放在一個store裡面)

再到發現有 store 可以被重複利用，於是使用 registerModule 做動態註冊，還用 namespace 機制存取剛剛註冊的 module

今天正是想紀錄一下這個有趣的機制還有workaround🤭

版本

• Vue: ^2.6
• Vuex: ^3.3

需求長什麼樣呢？

比如說Facebook的訊息功能好了，每一個群組都是一個對話框，對話框裡面都需要儲存、顯示傳過的訊息，而這個訊息就可以寫成一個MessageStore重複利用

最基本的程式就像這樣：

接著我們還需要一個 Root Store 可以給我們存放群組的資訊，以及動態註冊module

接著呢，就是把 Root store 註冊進 vue instance，然後完成一些額外的東西就行拉
直接看看實際上的code吧！