vue那些事儿之使用混入 (mixins) 解决可复用性

    用vue这种模板式开发做项目的时候。经常遇到一个问题，这个变量我好像在某个vue里写过了？！！！WDF？ 这个方法我在刚才的vue里写过了？不好吧，我那么懒，老做重复的工作。去vue官网看了下，发现有一个叫mixins的东西。

官网上是这么说的：

    混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

举栗子：

Js:

export const initNet = {
  data: function () {
    return {
      _netData: {}
    }
  },
  methods: {
    async init (api) {
      let data = await this.$fetch.get(api)
      this._netData = data
    }
  }
}

a.vue js:

export default {
  mixins: [initNet],
  created: function () {
    this.init('/user/a')
  }
}

   a.vue html:

<template>
  <div>
    <span>{{_netData.a.userName}}</span>
  </div>
</template>

b.vue js:

export default {
  mixins: [initNet],
  created: function () {
    this.init('/user/b')
  }
}

a.vue html:

<template>
  <div>
    <span>{{_netData.b.userName}}</span>
  </div>
</template>