vue Mixins

mixins 混入

1. 主要作用就是复用我们的代码
2. 例如，我们现在有2个组件，一个componentA ，一个componentB, 两个组件都有同一个方法，就是点击显示隐藏

• componentA.vue

<template>
  <div>
    <h1 v-if="show">Hello,我是componentA</h1>
    <button @click="toggleShow">切换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>

<style>
</style>

• componentB.vue

<template>
  <div>
    <h1 v-if="show">Hello,我是componentB</h1>
    <button @click="toggleShow">切换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>

<style>
</style>

mixins使用方法

1. 我们可以看到两个组件都有一个共同的show，一个共同的toggleShow方法，这个时候我们就可是使用到vue mixins 混入。
2. 这个时候我们可以创建一个文件夹mixins，在里面创建一个show.js，我们直接把组件A,和组件B中相同的代码复制过来。

// mixin 是一个对象，可以写vue中的export default {}中的data,methods created 等所有的方法
export const showMixin = {
    data() {
        return {
            show: true,
        };
    },
    methods: {
        toggleShow() {
            this.show = !this.show;
        },
    },
}

3. 我们直接在组件A和组件B中引入show.js定义的showMixin

<template>
  <div>
    <h1 v-if="show">Hello,我是componentA</h1>
    <button @click="toggleShow">切换</button>
  </div>
</template>

<script>
import { showMixin } from "../mixins/show";
export default {
  mixins: [showMixin],
};
</script>

<style>
</style>

3. 我们mixins,中定义了show，那么我们组件中还能从新定义吗。

<template>
  <div>
    <h1 v-if="show">Hello,我是componentB</h1>
    <p>{{show}}</p>
    <button @click="toggleShow">切换</button>
  </div>
</template>

<script>
import { showMixin } from "../mixins/show";
export default {
  mixins: [showMixin],
  data() {
    return {
      show: "test",
    };
  },
};
</script>

<style>
</style>

我们可以看到，重新定义在data中的show，显示了test.

mixins 实战

1. 后台管理系统，有大量的表格页面。里面有非常多可以复用的内容，分页，表格高度，loading效果，等。
2. 创建一个mixins文件夹，创建list.js

export const listMixins = {
    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
        })
    }
}

3. 使用

import { listMixins} from '@/mixins/list' // 引入
import {getList} from '@/api/demo'
export default {
  name: 'mixins-demo',
  mixins: [listMixins], // 使用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()
  }
}