在 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],
};
方法二
通过window对象进行传递
在mixin中对组件的初始化参数进行监听，如果已经初始化，需要传递参数了，那么就对参数进行修改
//mixin js
let viewer = null;
const tools = {
watch: {
initialized: function (val) {
if (val) {
viewer = window.viewer;
}
}
}
}
export default tools;
//index.vue
<script>
import {mixin} from "@/mixin";
let viewer = null;
export default {
mixins: [mixin],
name: "Index",
data() {
return {
initialized: false,
};
},
mounted() {
this.init().then((viewer) => {
this.initialized = true;
window.viewer = viewer;
});
},
methods: {
init: function () {
viewer = new XXX();//随便写的类
resolve(viewer);
})
}
},
};
</script>
方法三
新建mixins文件
在src目录下新建mixins目录。mixins目录里新建index.js文件。在这里写一个loadPage路由跳转方法供全局使用
export default = {
data(){
return{};
},
methods:{
loadPage(routerName,param){
if(param){
this.$router.push({name:routerName,query:param});
}else{
this.$router.push({name:routerName});
}
}
}
}
把mixins注册全局
在src/main.js文件加入以下两行
import Mixin from './mixins';
Vue.mixin(Mixin);
加入后，main.js文件如下
import Vue from 'vue'
import App from '@/App'
import router from './router'
import Mixin from './mixins';
Vue.mixin(Mixin);
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
})
使用mixins里的方法
设置路由
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path:'/',
redirect:'/index'
},
{
path: '/about',
name: 'About',
component:resolve => require(['@/pages/About'],resolve)
},
{
path: '/index',
name: 'Index',
component:resolve => require(['@/pages/Index'],resolve)
},
{
path: '/product',
name: 'Product',
component:resolve => require(['@/pages/Product'],resolve)
}
]
})
页面调用mixins里的loadPage方法
<p @click="loadPage('Index')">Index</p>
需要用到路由跳转的页面如下
<template>
<div>
<p>这是index页面</p>
<p @click="loadPage('Index')">Index</p>
<p @click="loadPage('About')">About</p>
<p @click="loadPage('Product')">Product</p>
</div>
</template>
