摘要：
页面请求要使用到很多重点的查询，写在本页面的逻辑代码太混乱，所以可以抽离封装成功一个js库混淆进来！
commonMixins.js:
import {Toast} from "vant";
export const oplistMix = {
mounted() {
this.GETSTORE_LOCATION();//店面位置
this.TWO_METHODS();
},
data() {
return {
STORE_LOCATION:[],//店面位置
}
},
methods: {
//店面位置
GETSTORE_LOCATION() {
this.$axios
.get("/common.do", {
params: {
method: this.$method.STORE_LOCATION,
data: {
type_code:"STORE_LOCATION"
},
},
})
.then((response) => {
let res = response.data;
if (res.code == 0) {
let arr = [];
res.data.forEach(item => {
arr.push({
code: item.code,
name: item.name
})
});
this.STORE_LOCATION = arr;
}
})
.catch((error) => {});
},
TWO_METHODS(){
},
//根据code回显name
getCodeName(code,list) {
if (!code) {
return null;
}
let code_arr = code.split(',');
let name = '';
for (let i = 0, len = list.length; i < len; i++) {
let item = list[i];
for (let q = 0;q < code_arr.length;q++) {
if (item.code == code_arr[q]) {
name += item.name
if (i != code_arr.length - 1) {
name += ','
}
}
}
}
return name;
},
getDictionaryValue(code,list) {
if (!code) {
return null;
}
var name = '';
list.map(item => {
if(item.code == code){
name = item.name;
}
})
},
}
}
混淆进入页面：
<template>
<div class="storeDetail">
<div class="detailPage">
<div class="pageContent">
<div class="pageItem">
<div>店面位置</div>
<div>{{getDictionaryValue(storeDetail.store_location,STORE_LOCATION) || '--'}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { oplistMix} from "../../commonMixins.js";
import { Toast} from "vant";
export default {
mixins: [oplistMix],
components: {
Toast
},
data(){
return{
id:"",
storeDetail:{},
}
},
created(){
this.id = this.$route.query.id || '';
this.erp_code = this.$route.query.erp_code || '';
this.getStoreDetail();
},
methods:{
getStoreDetail(){
let data ={
id:this.id,
key_word:"",
pre_next_flag:1,
pagenum:1,
pagesize:10,
}
this.$axios
.get("/common.do", {
params: {
method: this.$method.STORE,
data: data,
},
})
.then((response) => {
let res = response.data;
if (res.code == 0) {
this.storeDetail = res.data;
}
})
}
}
}
</script>
<style lang="less" scoped>
@import "editStore.less";
</style>
Vue Mixins 是一种在 Vue.js 中复用组件逻辑的机制。Mixins 可以为组件提供可复用的功能，例如数据响应式、方法等。
// 定义一个 Mixin 对象
const myMixin = {
data() {
return {
mixinMessage: 'Hello from mixin!'
}
},
methods: {
mixinSayHello() {
console.log(this.mixinMessage);
}
}
}
// 定义一个主组件，并使用 Mixin
const myComponent = Vue.component('my-component', {
extends: myMixin,
data() {
return {
componentMessage: 'Hello from component!'
}
},
methods: {
sayHello() {
console.log(this.componentMessage);
}
}
})
// 创建一个主组件实例
const myInstance = new myComponent();
// 调用继承自 Mixin 的方法和数据
myInstance.mixinSayHello(); // 输出 "Hello from mixin!"
console.log(myInstance.$data.mixinMessage); // 输出 "Hello from mixin!"
在这个示例中，我们首先定义了一个名为 myMixin 的 Mixin 对象，它有一个名为 mixinMessage 的数据属性和一个名为 mixinSayHello 的方法。然后，我们定义了一个名为 myComponent 的主组件，并使用 extends 关键字将其与 myMixin 合并。这样，myComponent 就拥有了 mixinMessage 数据属性和 mixinSayHello 方法。最后，我们创建了一个 myComponent 实例，并调用了它的 mixinSayHello 方法和访问了它的 mixinMessage 数据属性。
