35、vuex初探（三）— 倉庫拆分

摘要： 前言：上一章我們隊vuex中操作的幾個方法 Dispatch 、 Commit 等進行了講解；這一章節為進階內容，我們著手這vuex倉庫進行拆分。 GitHub： https://github.com/Ewall1106/mall 1、倉庫拆分 當我們倉庫程式碼體...

前言：上一章我們隊vuex中操作的幾個方法 Dispatch 、 Commit 等進行了講解；這一章節為進階內容，我們著手這vuex倉庫進行拆分。

GitHub： ofollow,noindex">https://github.com/Ewall1106/mall

1、倉庫拆分

• 當我們倉庫程式碼體積比較大以後，我們需將 action 、 mutation 和 getter 分割到單獨的檔案，而不是放在index這一個檔案中，大家也可以看看官網的 vuex專案結構 闡述。

2、註冊引入

• 在 index.js 中匯入這些檔案並暴露出去。

3、檔案內容

• 然後，我們在拆分的各個檔案中，將先前在index.js中相對應的操作內容複製遷移。

// actions.js
export default {
changeCity(ctx, city) {
ctx.commit('changeCity', city)
}
}

// mutations.js
export default {
changeCity(state, city) {
state.city = city;
}
}

// state.js
export default {
city: '杭州'
}

這樣，我們就對整個vuex倉庫進行了一個初步的拆分。

4、其它

以前我也寫過幾篇關於vuex的文章，感興趣的話大家可以移步看看：

• 我對vuex的理解(一)
• 我對vuex的理解(二) 之 mapGetters取值和mapMutations的傳參

下章我們就說說 mapGetters 、 mapMutation 、 mapState 這幾個方法。