Vue管理系統前端系列四元件拆分封裝
阿新 • • 發佈：2020-08-22
[toc]
-------------------
# 元件封裝
在上一篇記錄中，首頁中有太多的程式碼，為了避免程式碼的臃腫，需要對主要的功能模組拆分，來讓程式碼看起來更簡潔，且能進行復用。
拆分後還加了些小功能，加入了修改 title 的程式碼，修改方式參考[vue 動態修改 title](../vue/vue_title.md)。
還增加了當前請求的頁面快取，使用狀態管理器處理。監聽路由，儲存到 state 中，來處理的。 如何監聽可參考[vue 計算屬性和監聽屬性](../vue/vue_computed_watch.md)。
完整效果圖如下：
# 首頁佈局拆分後結構
拆分後的，佈局結構圖：
# 拆分後代碼
**佈局最外層** index 程式碼，使用頭部，側邊欄，主內容欄組成，程式碼如下：
```vue
```
**頭部** `index.vue` 程式碼:
```vue
```
頭部中引用的相關元件程式碼如下
**摺疊導航欄** `hamburger` 下的 `index.vue` 程式碼:
```vue
```
**摺疊導航欄** `logo` 下的 `index.vue` 程式碼:
```vue
```
**側邊欄**下的 `index.vue`程式碼:
```vue
```
**內容模組**下的 `index.vue`程式碼:
```vue
```
# 狀態管理中新增 app 模組
程式碼如下：
```js
export default {
state: {
// 是否摺疊導航欄
isCollapse: false,
// 訪問頁集合
mainTabs: [],
// 當前訪問頁名
mainTabsActiveName: '',
},
getters: {
isCollapse: (state) => {
return state.isCollapse
},
},
mutations: {
toggleCollapse(state) {
state.isCollapse = !state.isCollapse
},
updateMainTabs(state, tabs) {
state.mainTabs = tabs
},
updateMainTabsActiveName(state, name) {
state.mainTabsActiveName = name
},
},
actions: {},
}
```
---
當然還有一些小的調整點，可參考 git 上的提交版本 **首頁元件拆分**
原文地址：[http://book.levy.net.cn/doc/frontend/uiframe/module_split.html](http://book.levy.net.cn/doc/frontend/uiframe/module_split.html)