Vue mixins使用

概述：mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用。

例：定义一个mixin.js

import { mapGetters } from 'vuex';
import { generateTitle } from '@/utils/i18n';
export var Instance_Mixin = {
  computed: {
    ...mapGetters([
      'examId',
      'app/env',
    ]),
    env() {
      return this['app/env'];
    },
  },
  methods: {
    generateTitle(title) {
      return generateTitle(title);
    },
  },
};

组件中使用：index.vue

<template>
  <div id="app">
  </div>
</template>

<script>
import { Instance_Mixin } from '@/utils/mixin';
export default {
  name: 'App',
  mixins: [Instance_Mixin],
  components: {
  },
  computed: {},
  created() {},
  mounted() {
    console.log(this.examId)
  },
  data() {
    return {
    };
  },
  methods: {
  }
</script>

注意：

created会初始化了2次，并且组件自己的created后执行。
对于 methods, components 和 directives 将合并到同一个对象内。如果键冲突则组件的选项优先。