小技巧|使用Vue.js的Mixins複用你的程式碼
阿新 • • 發佈:2019-01-05
Vue中的混入 mixins 是一種提供分發 Vue 元件中可複用功能的非常靈活的方式。聽說在3.0版本中可能會用Hooks的形式實現,但這並不妨礙它的強大。
這裡主要來討論 mixins 如何優化我們的資料列表程式碼。
如果我們有大量的表格頁面,仔細一扒拉你發現非常多的東西都是可以複用的例如分頁,表格高度,載入方法, laoding 宣告等一大堆的東西。下面我們來整理出來一個簡單通用混入 list.js
list.js
const list = { data () { return { loading: false, pageParam: { pageNum: 1, // 頁碼 pageSize: 20, // 頁長 total: 0 // 總記錄數數 }, pageSizes: [10, 20, 30, 50], // 頁長數 pageLayout: 'total, sizes, prev, pager, next, jumper', // 分頁佈局 pageCount: 5, // 頁碼按鈕的數量,當總頁數超過該值時會摺疊(大於等於 5 且小於等於 21 的奇數) list: [] } }, methods: { // 分頁回掉事件 handleSizeChange (val) { this.pageParam.pageSize = val this.getList() }, handleCurrentChange (val) { this.pageParam.pageNum = val this.getList() }, /** * 表格資料請求成功的回撥 處理完公共的部分(分頁,loading取消)之後把控制權交給頁面 * @param {*} apiResult * @returns {*} promise */ listSuccessCb (apiResult = {}) { return new Promise((resolve, reject) => { let tempList = [] // 臨時list try { this.loading = false tempList = apiResult.data this.pageParam.total = apiResult.page.total // 直接丟擲 resolve(tempList) } catch (error) { reject(error) } }) }, /** * 處理異常情況 * ==> 簡單處理 僅僅是對錶格處理為空以及取消loading */ listExceptionCb (error) { this.loading = false console.error(error) } }, created () { // 這個生命週期是在使用元件的生命週期之前 this.$nextTick().then(() => { // todo }) } } export default list
下面我們直接在元件中使用這個mixins
import mixin from '@/mixins/list' // 引入 import {getList} from '@/api/demo' export default { name: 'mixins-demo', mixins: [mixin], // 使用mixins data () { return { } }, methods: { // 載入列表 getList () { const params = { ...this.searchForm, ...this.pageParam } fetchUserList(params).then(res => { if (res.code === 0) { this.listSuccessCb(res).then((list) => { this.list = list }).catch((err) => { console.log(err) }) } }) }, }, created() { this.load() } }
使用了 mixins 之後一個簡單的有 loadoing, 分頁,資料的表格大概就只需要上面這些程式碼。
在list.js
中我們可以直接呼叫元件的方法,比如在分頁回撥事件中呼叫元件的 getList()
方法,在元件中直接呼叫 list.js
中的程式碼,如直接訪問 this.pageParam
。
當元件和 mixins 物件含有同名選項時,這些選項將以恰當的方式混合。比如,資料物件在內部會進行淺合併 (一層屬性深度),在和元件的資料發生衝突時以元件資料優先。
你學會了嗎?還不快試試。。。
來源:https://segmentfault.com/a/1190000017716554