Vue管理系統前端系列四元件拆分封裝
阿新 • • 發佈:2020-08-22
[toc]
-------------------
# 元件封裝
在上一篇記錄中,首頁中有太多的程式碼,為了避免程式碼的臃腫,需要對主要的功能模組拆分,來讓程式碼看起來更簡潔,且能進行復用。
拆分後還加了些小功能,加入了修改 title 的程式碼,修改方式參考[vue 動態修改 title](../vue/vue_title.md)。
還增加了當前請求的頁面快取,使用狀態管理器處理。監聽路由,儲存到 state 中,來處理的。 如何監聽可參考[vue 計算屬性和監聽屬性](../vue/vue_computed_watch.md)。
完整效果圖如下:
![](https://img2020.cnblogs.com/blog/1750888/202008/1750888-20200821223530656-2052287661.png)
# 首頁佈局拆分後結構
拆分後的,佈局結構圖:
![](https://img2020.cnblogs.com/blog/1750888/202008/1750888-20200821223547466-311483498.png)
# 拆分後代碼
**佈局最外層** 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)