《vue》mixin 传递参数

在 Vue2 中，可以通过mixin把一些重复的代码提取出来。

mixA.vue

// mixA.vue
export default {
  created() {
    console.log('mixin A created...');
}

我想在 Demo.vue 中的created也输出mixin A created...

// Demo.vue
import MixA from './mixA.vue';
export default {
  mixins: [MixA]
}

但是如果我想给mixA传入一个 url 和一些参数，然后发送ajax请求？
可以吧mixA写成一个js文件，而不是vue

mixA.js

// mixA.js
/**
 * mixin
 * @param {object} configs 传递过来的，请求时候的参数配置，{ url、params }
 * @returns {function} mixin
 */
export default (configs) => {
  return {
      data:() => ({
        a: 123,
        b: 234,
        dataList: [],  // 装请求来的数据
        ...configs  // 把传递过来的参数混入，这样 this 就有 url 和 请求需要的参数了
      }),
      methods: {
          async getData() {
              const params = {
                    c: 1,
                    d: 2,

                    ...configs.params
              }
              this.dataList = await this.axios.get(this.url, { params });
          }
      },
      created() {
        this.getData();
      }
  }
}

使用的组件：Demo.vue

// Demo.vue
<template>
    <div class="demo-wrap">
        <li v-for="item in dataList" :key="item">{{ item }}</li>  <!-- 这里的 dataList 是 mixA.js 的数据 -->
    </div>
</template>
<script>
  import MixA from './mixA.js';
  // 传递给 mixin 的参数配置
  const configs = {
    url: '/v5/product/game/recommend',
    params: {
      gameId: '',
      cmd: 1,
    },
  };

const mixa = new MixA(configs);
    export default {
    mixins: [mixa]
  }
</script>

如果想我这种情况，gameId是router过来传过来的，可以在beforeRouteEnter钩子函数中修改，
因为mixin的组件，是在使用的组件之前先创建的，也就是说，mixA的created要比Demo.vue的created更先执行！；所以可以这样：

// Demo.vue
  import MixA from './mixA.js';
  // 传递给 mixin 的参数配置
  const configs = {
    url: '/v5/product/game/recommend',
    params: {
      gameId: '',
      cmd: 1,
    },
  };
export default {
  name: 'demo',

  // 进来之前，修改传给 mixin 的参数配置
  beforeRouteEnter(from, to, next) {
    configs.params.gameId = from.query.gameId;
    next(true);
  },

  mixins: [mixa],
};