本文主要是介绍mixins混淆请求字典封装库，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
摘要：
页面请求要使用到很多重点的查询，写在本页面的逻辑代码太混乱，所以可以抽离封装成功一个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回显namegetCodeName(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.nameif (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 数据属性。
这篇关于mixins混淆请求字典封装库的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
