小技巧|使用Vue.js的Mixins復用你的代碼
阿新 • • 發佈:2019-01-05
let 整理 tps 簡單的 技巧 created ger methods 周期
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
小技巧|使用Vue.js的Mixins復用你的代碼