vue-mixins 使用注意事项和高级用法

在项目中 使用到了mixins(混合)这个特性官方文档: mixins

---

实际项目中 一般都存在 列表(list) 这种很常见的使用场景

demo

file: mixins/list.js

module.exports = {
  data () {
    return {
      list: [],
      page: 1,
      limit: 15,
      total: 0
    }
  },
  created () {
    this.initList()
  },
  watch: {
    page: 'loadData'
  },
  methods: {
    /**
     * 获取请求参数 默认只传递index(页码) limit(每页条数) 可以由调用方传递指定对象合并(或者覆盖)原参数
     * @param params
     * @returns {*}
     */
    getParams (params) {
      return Object.assign({
        index: this.page,
        limit: this.limit
      }, params)
    },
    /**
     * 加载更多
     */
    loadMore () {
        this.page++
    },
    /**
     * 推送到list中 因为vue的监听特性 只能用push进行数据的添加 如果有特殊处理 通过传递一个filter来过滤数据
     * @param list
     * @param filter
     */
    pushToList (list, filter) {
      list.forEach((item) => {
        if (typeof filter === 'function') {
          this.list.push(filter(item))
        } else {
          this.list.push(item)
        }
      })
    },
    /**
     * 初始化列表
     */
    initList () {
      this.page = 1
      this.list = []
      this.loadData()
    },
    /**
     * @overwrite
     * 加载数据方法 用到该mixin的都应该重写该方法 否则无法实现加载数据
     */
    loadData () {
      // 每个列表自己的获取数据的方法需要重写
    }
  }
}

其中 基本的属性 list page limit total 是共同属性每一个列表结构都具备的属性 可以放到mixins的声明中而initList() loadData() loadMore() 是最基本的自带方法getParams() pushToList() 是我项目的扩展方法 主要用于参数的处理和结果的处理从这段代码中可以得知 加载了该mixins的组件会在创建之后执行一个initList方法顾名思义 就是初始化列表的方法

route: {
  data () {
    this.initList()
  }
}

但是问题来了 如果我的组件 不只是在初始化的时候使用而是在使用了keep-alive的应用下在route->data()的钩子中执行初始化呢?

created () {
    this.initList()
}

那么问题来了 这时候你打开控制台 刷新页面 就会发现 第一次进入 初始化了两次

怎么解决?

读过官方文档后我想你会有答案

我这里提供一个文档最后提到的比较灵活的简单的方案 加一个自定义选项

created () {
    let option = this.$options.doNotInit
    console.log(option)
    if (!option) {
      this.initList()
    }
}

通过该选项 doNotInit 来判断是否需要在组件创建完毕之后就初始化

在调用该mixins的组件中 添加这么一个选项 就可以让组件不执行初始化方法

而是通过route->data()钩子来控制列表的初始化

file: anyVueComponent.vue

import List from 'path/mixins/list'
export default{
    mixins: [List],
    data () {
        return {
        // 除列表外额外的属性
        }
    },
    methods: {
        loadData () {
            this.$http.post(yourApiUrl, this.getParams()).then((res) => {
            // do somethings
            })
        }
    },
    doNotInit: true,
    route: {
        data () {
            this.initList()
        }
    }
}

说到底 仔细阅读Vue文档 项目中遇到的绝大多数问题 都能迎刃而解~