前言
最近在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傳送門