在 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],
};