vue mixin（混入）实际项目中使用详解

前言

最近在vue后台管理项目中遇到需求，有多个模块页面都存在组织列表级联选择框为了减少工作量更重要的是增强项目的可维护性，所以就使用了mixin 混入组织列表级联选择器到每个页面。

话不多说，接下来就是使用过程

1.创建mixins文件夹

首先创建一个mixins文件夹，然后在创建相应的混入js文件，我这里文件名就叫organization.js

2.organization.js文件结构

因为mixin 是一个混入对象，所以在organization.js中我们可以和在vue组件中一样来定义我们的data、methods 等，并通过export 导出。

3.书写业务代码

因为mixin 仅是抽离页面逻辑代码，所以还是要在每个页面写好html和样式。项目中使用的是elementui,所以在组建中先引入element 中的级联选择器组件

      <!--组织列表 级联选择器 -->
      <el-cascader
        placeholder="选择区域"
        :options="OrganizationList"
        filterable
        :props="props"
        size="mini"
        v-model="cascaderVal"
        @change="cascaderChange"
        ref="cascaderAddr"
        popper-class="qqq"
        class="m-r-15"
        clearable
      ></el-cascader>

再回到minxins 文件中，在data定义需要的数据

//  获取组织列表api
import { cascadeCelectOrganization } from "@/api/applicationmanagement";
//  递归删除级联数据树值为null的children方法
import { delEmptyArr } from "@/utils/validate";
import { mapGetters, mapActions } from "vuex";
export const organization = {
    data() {
        return {
            //  组织列表数据
            OrganizationList: [],
            //  级联选择器选中值绑定
            cascaderVal: ["", ""],
            //  组织列表级联配置项
            props: {
                label: "label",
                value: "value",
                children: "children",
                checkStrictly: true,
            },
        }
    },
    created() {
    },
    computed: {
    },
    methods: {
    }
}

一切准备妥当，开始写关键部分代码，现在mehods中定义请求组织列表数据方法。数据请求过来之后赋值给data中定义的变量，然后将请求来的组织列表数据存入vuex。之后调用方法给级联选择器设置默认值

     methods:{
           ...mapActions('app', ['changeOrganizationList']),
         //  获取组织列表
        async getOrganization() {
            //  store中有值则组织获取
            if (this.organizationList) return this.setOrganization()
            const { data: res } = await cascadeCelectOrganization();
                if (res.code!==1000) return this.$message.error("组织列表获取失败!")
                //  递归去除空对象
                delEmptyArr(res.data);
                // 赋值
                this.OrganizationList = res.data;
                //  存入store
                this.changeOrganizationList(res.data)
                this.setDefaultVal()
            
        },
         //  设置默认值
        setDefaultVal() {
            //  默认赋值第一个组织
            this.cascaderVal[0] = this.OrganizationList[0].value;
            this.cascaderVal[1] = this.OrganizationList[0].children[0].value;
            //  组织列表获取之后干事情 在混入的组件中定义nextDo（）方法,如可以在该方法中定义请求表格列表数据 
              this.nextDo()            
        },
       }

然后再在methods中定义init 方法，因为之前已经将组织列表数据存入vuex,所以每次请求之前判断vuex中是否有组织列表数据，vuex中存在组织列表数据就不在发请求，这样的话多个页面使用级联选择器就只要请求一次即可。

        init() {
            //  组织列表数据存入store,每次请求前判断store,为空重新获取组织列表
            this.organizationList && this.setOrganization()
            !this.organizationList && this.getOrganization()
        }，
        // vuex中有数据  直接取出来赋值组织列表数据
        setOrganization() {
            //  store中取出组织列表数据
            this.OrganizationList = this.organizationList
            this.setDefaultVal()
        },
    //  计算属性中引入vuex中的组织列表数据，供级联选择器使用
   computed: {
        ...mapGetters(['organizationList')
    },

最后在created中调用调用init（）方法。

    created() {
        this.init()
    },

大功告成，最后在需要组织列表级联选择器的组件中先引入organization .js，再混入。methods中定义nextDo方法，书写组织列表获取之后的逻辑。ok完成!

//  混入组织列表方法数据
import { organization } from "@/view/mixins/organization";
export default {
  mixins: [organization],
  methods:{
  //  组织列表获取之后干的事
    nextDo() {
      //  片区id设置初始默认值
      this.confirmPageParams.param.orgId = this.cascaderVal[1];
      //  获得片区id之后再请求相应的片区数据
      this.getConfirmPagePage();
    },
  }
}

最后附上mixins中organization .js完整代码

//  获取组织列表api
import { cascadeCelectOrganization } from "@/api/applicationmanagement";
//  递归删除级联数据树值为null的children方法
import { delEmptyArr } from "@/utils/validate";
import { mapGetters, mapActions } from "vuex";
export const organization = {
    data() {
        return {
            //  组织列表数据
            OrganizationList: [],
            //  级联选择器选中值绑定
            cascaderVal: ["", ""],
            //  组织列表级联配置项
            props: {
                label: "label",
                value: "value",
                children: "children",
                checkStrictly: true,
            },
        }
    },
    created() {
        this.init()
    },
    computed: {
        ...mapGetters(['organizationList')
    },
    methods: {
        ...mapActions('app', ['changeOrganizationList']),
        //  获取组织列表
        async getOrganization() {
            //  store中有值则组织获取
            if (this.organizationList) return this.setOrganization()
            const { data: res } = await cascadeCelectOrganization();
                if (res.code!==1000) return this.$message.error("组织列表获取失败!")
                //  递归去除空对象
                delEmptyArr(res.data);
                // 赋值
                this.OrganizationList = res.data;
                //  存入store
                this.changeOrganizationList(res.data)
                this.setDefaultVal()
            
        },
        //  设置组织列表数据
        setOrganization() {
            //  store中取出组织列表数据
            this.OrganizationList = this.organizationList
            this.setDefaultVal()
        },
        //  设置默认值
        setDefaultVal() {
            //  默认赋值第一个组织
            this.cascaderVal[0] = this.OrganizationList[0].value;
            this.cascaderVal[1] = this.OrganizationList[0].children[0].value;
            //  组织列表获取之后的事情 在被混入的组件中定义 用户未进行全局搜索才执行
            this.nextDo()
            
        },
        init() {
            //  组织列表数据存入store,每次请求前判断store,为空重新获取组织列表
            this.organizationList && this.setOrganization()
            !this.organizationList && this.getOrganization()
        }
    }
}

最后大家也可以去vue官网看看对于mixin的详细解释mixin传送门