摘要：

页面请求要使用到很多重点的查询，写在本页面的逻辑代码太混乱，所以可以抽离封装成功一个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 数据属性。