vue中mixins的工具的封裝方式

更新時(shí)間：2022年05月24日 11:39:51 作者：周小盜

這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

mixins工具的封裝

vue的mixins的工具是什么？

就是我們?cè)賹懶畔⒐芾硐到y(tǒng)時(shí)，涉及到大量的增刪查改調(diào)用后臺(tái)接口的重復(fù)的方法，我們可以把這些方法集合起來(lái)直接作為一個(gè)js文件，后面可以直接引入，數(shù)據(jù)和方法都不需要聲明，直接使用即可。

再概括一下，就是請(qǐng)求后臺(tái)接口的方法的集合。

js工具代碼

具體注釋我會(huì)直接寫在代碼里，然后大家可以自己直接對(duì)照著代碼看

代碼如下：

//這里引入了qs,使用npm install qs就可進(jìn)行安裝，在后面下載的方法里用到（get方法拼接參數(shù)），
//如果沒(méi)有這個(gè)需求，可以不引入（同時(shí)注意刪除下方的下載方法）
import qs from 'qs'
export default {
  data() {
    return {
    //這個(gè)mixinViewModuleOptions需要在使用這個(gè)工具的時(shí)候在vue文件的data中聲明
      mixinViewModuleOptions: {
        mockData: null,
        getDataListURL: '', // 數(shù)據(jù)列表接口 API地址
        activatedIsNeed: true, // 此頁(yè)面是否在激活(進(jìn)入)的時(shí)候，調(diào)用查詢數(shù)據(jù)列表接口
        queryDataURL: '', // table查詢接口
        deleteURL: '', // 刪除接口
        downLoadURL: '', // 下載接口
        deleteIsBatch: false, // 是否批量刪除
        deleteIsBatchKey: 'id', // 刪除接口，批量狀態(tài)下有那個(gè)key進(jìn)行標(biāo)記操作，比如 pid，uid
        // getDataListIsPage: true // 不同的數(shù)據(jù)接口，返回的數(shù)據(jù)接口不相同，用次變量來(lái)區(qū)別
      },
      dataForm: {}, // 查詢條件
      dataList: [], // 數(shù)據(jù)列表
      page: 1, // 當(dāng)前頁(yè)碼
      rows: 10, // 每頁(yè)數(shù)
      total: 0, // 總條數(shù)
      dataListLoading: false, // 數(shù)據(jù)列表，loading狀態(tài)
      dataListSelections: [], // 數(shù)據(jù)列表，多選項(xiàng)
      addOrUpdateVisible: false, // 新增／更新，彈窗visible狀態(tài)
    }
  },
  created() {
    if (this.mixinViewModuleOptions.activatedIsNeed) {
     //獲取數(shù)據(jù)的方法
      this.getDataList()
    }
  },
  methods: {
    // 下載excel
    downLoadHandle(id) {
      if (!this.dataList.length) {
        return this.$message.warning('沒(méi)有可導(dǎo)出的數(shù)據(jù)')
      }
      if (!id) {
        return this.$message.warning('id字段無(wú)效錯(cuò)誤')
      }
      const ids = this.dataListSelections.map(a => a[id]).join(',')
      //最開(kāi)始引入的qs在這里用到，作用：將dataForm這個(gè)對(duì)象用‘&'拼接成字符串，再拼到下載鏈接后
      const dataForm = qs.stringify(Object.assign({}, this.dataForm, { ids }))
   
      const url = `${window.SITE_CONFIG.BASE_URL.serverIP}${this.mixinViewModuleOptions.downLoadURL}?${dataForm}`
      window.open(url)
    },
     // 刪除
    deleteHandle(id) {
      if (!id && this.mixinViewModuleOptions.deleteIsBatch
      && this.dataListSelections.length <= 0) {
        return this.$message({
          message: '請(qǐng)選擇刪除項(xiàng)',
          type: 'warning',
          duration: 800,
        })
      }
      this.$confirm('您確定刪除此條內(nèi)容么', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let ids = ''
        if (this.dataListSelections.length) {
          ids = this.dataListSelections.map(item =>
          `${item[this.mixinViewModuleOptions.deleteIsBatchKey]}`).join(',')
        } else {
          ids = id
        }
        this.$http.get(`/${this.mixinViewModuleOptions.deleteURL}`, {
          params: {
            id: ids,
          },
        }).then(({ data }) => {
          if (data.code !== 1) {
            return this.$message.error(data.msg)
          }
          this.$message({
            type: 'success',
            message: '刪除成功!',
            duration: 800,
            onClose: () => {
              this.getDataList()
            },
          })
        })
      }).catch(() => {
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },
    dataListSelectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 查詢
    queryHandle() {
      this.page = 1
      this.getDataList()
    },
    // 獲取table數(shù)據(jù)
    getDataList() {
      this.dataList = []
      this.dataListLoading = true
      return this.$http.get(`/${this.mixinViewModuleOptions.getDataListURL}`, {
        params: {
          page: this.page,
          rows: this.rows,
          ...this.dataForm,
        },
      }).then(({ data }) => {
        this.dataListLoading = false
        if (data.code !== 1) {
          this.dataList = []
          this.total = 0
          return this.$message.error(data.msg)
        }
        this.dataList = data.data ? data.data : []
        this.total = data.total ? data.total : 0
        return data.data
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    // 分頁(yè), 每頁(yè)條數(shù)
    pageSizeChangeHandle(val) {
      this.page = 1
      this.rows = val
      if (this.dataForm.pageSize) {
        this.dataForm.pageNum = 1
        this.dataForm.pageSize = val
      }
      this.getDataList()
    },
    // 分頁(yè), 當(dāng)前頁(yè)
    pageCurrentChangeHandle(val) {
      this.page = val
      if (this.dataForm.pageNum) {
        this.dataForm.pageNum = val
      }
      this.getDataList()
    },
  },
}

三、使用這個(gè)文件

1.引入

//js文件名稱是view-module.js,引入過(guò)來(lái)之后命名 mixinViewModule（后面需要用到，注意一致）
import mixinViewModule from "@/mixins/view-module";

2.聲明

直接只貼聲明的代碼讓人看不明代位置，聲明的位置又不好描述，我這里直接貼圖：

在這里插入圖片描述

3.使用文件的html代碼

<template>
  <section class="main-container-box">
      <el-form ref="form" :model="dataForm" inline>
        <el-form-item label="商品名稱:">
          <el-input placeholder="請(qǐng)輸入物資名稱" v-model="dataForm.goodsName" clearable></el-input>
        </el-form-item>
        <el-form-item>
           //這里的getDataList方法不需要再methods中聲明，會(huì)直接執(zhí)行view-module.js中的getDataList方法，參數(shù)為上面聲明的dataForm
           <el-button type="plain" @click="getDataList">查詢</el-button>
        </el-form-item>
      </el-form>
      //這里的dataList和view-module.js文件中的數(shù)據(jù)列表dataList名稱要一致，并且可以不用在data中聲明
      <el-table-self
            :data="dataList"
            style="width:100%"
            :height="'calc(100vh - 1.3rem)'"
            >
            <el-table-column  label="序號(hào)"  type="index" align="center" header-align="center" width="60"></el-table-column>   
            //這里就是自己表格中的數(shù)據(jù)，我只是遍歷寫出來(lái)的，大家可以不用管----↓
            <el-table-column  
                  v-for="(item,index) in columnList"
                  :key="index"
                  show-overflow-tooltip
                  :align="item.align" 
                  :fixed="item.fixed"
                  :prop="item.prop" 
                  :label="item.label"
            ></el-table-column>
            //---------------------------------------------------------------↑
      </el-table-self>
	//這是分頁(yè)組件，注意里面的參數(shù)：page,rows,total和方法pageSizeChangeHandle,pageCurrentChangeHandle名稱都要和view-module中一致
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="rows"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      ></el-pagination>
  </section>
</template>

總結(jié)：在管理信息系統(tǒng)中，基本的表格的增刪查改功能有很多，每個(gè)都寫一個(gè)方法對(duì)接接口會(huì)很麻煩，有了這個(gè)js工具了之后，每個(gè)文件只需要把它引入，然后傳入對(duì)應(yīng)的參數(shù)就可以了（mixinViewModuleOptions），只需要注意各個(gè)參數(shù)和方法名稱都要對(duì)應(yīng)起來(lái)，不要寫錯(cuò)了，就可以節(jié)省很多時(shí)間和代碼啦！

vue組件封裝及注意事項(xiàng)

props : {
        beanProps : {
            type : Object
        },
        // 多種類型
        propB: [String, Number],
        // 必傳且是字符串
        propC: {
          type: String,
          required: true
        },
        // 數(shù)字，有默認(rèn)值
        propD: {
          type: Number,
          default: 100
        },
        // 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
        propE: {
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定義驗(yàn)證函數(shù)
        propF: {
          validator: function (value) {
           return value > 10
          }
        }
    },

我們?cè)?props 中接收數(shù)據(jù)，注意props對(duì)象里面鍵值是對(duì)改數(shù)據(jù)的數(shù)據(jù)類型的規(guī)定。做了規(guī)范，使用者就只能傳輸指定類型（type類型）的數(shù)據(jù)，否則報(bào)警告

而props對(duì)象中的數(shù)據(jù)，我們可以直接在當(dāng)前組件中使用 this.beanProps ，可以直接使用。這里要強(qiáng)調(diào)一下，props傳過(guò)來(lái)的數(shù)據(jù)只做展示，不得修改，想修改，再新寫一個(gè)data中的變量承接做數(shù)據(jù)的再處理。

調(diào)用的時(shí)候

<!--要調(diào)用的頁(yè)面組件的頁(yè)面需要import導(dǎo)入組件頁(yè)面，然后再起別名-->
import treeSelectPeople from "../../../components/tree-select-people.vue";
?
<!--導(dǎo)入之后要添加組件到component對(duì)象里-->
?components: { treeSelectPeople },
?
<!--然后調(diào)用的時(shí)候標(biāo)簽名，就是你導(dǎo)入組件起的變量名了-->
<treeSelectPeople :beanProps="newBean.props"></treeSelectPeople>

我們已經(jīng)會(huì)使用父組件向子組件傳數(shù)據(jù)了,那子組件如何來(lái)修改父組件的數(shù)據(jù)呢？

這里提供 2 種實(shí)現(xiàn)方法，但是第一種不推薦，強(qiáng)烈不推薦

方式一：　　

selectValue: {
? ? ? ? ? data: '1'
? ? ? ? },
　//代碼段
　this.selectValue.data = '我被修改了'

即，父組件將對(duì)象數(shù)據(jù)傳遞給子組件，子組件直接修改props過(guò)來(lái)的對(duì)象的值

可以實(shí)現(xiàn)，感覺(jué)是一個(gè)比較快捷的方式。但是不推薦，這種方式寫多了，容易出錯(cuò)，特別是多層組件嵌套的時(shí)候。這種修改對(duì)代碼的迭代和錯(cuò)誤的捕捉都不友好，所以建議大家別這樣寫。

他的實(shí)現(xiàn)原理簡(jiǎn)單提一下：這個(gè)對(duì)象、數(shù)組啦，是引用數(shù)據(jù)類型，說(shuō)白了，就是存儲(chǔ)單元的信息是指針，真正數(shù)據(jù)在別的地方，通過(guò)指針查詢的數(shù)據(jù)，所以這樣寫，對(duì)瀏覽器來(lái)說(shuō)僅僅是傳遞了一個(gè)指針，數(shù)據(jù)還是同一份數(shù)據(jù)。所以你能修改。

方式二：

正兒八經(jīng)的通過(guò) $emit 方法去掉父組件的方法，在父組件中修改data的數(shù)據(jù)。（根正苗紅的方法，規(guī)范寫法）（就是在子組件新建一個(gè)新的變量來(lái)獲取父組件傳過(guò)來(lái)的值）

<template>
? ? <section class="f-mainPage">
? ? ? ? <!--selectFunc 選擇完成的回調(diào) ? ? ?searchList 下拉列表的數(shù)據(jù)-->
? ? ? ? <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>
? ? </section>
</template>

<script type="text/ecmascript-6">
? import Search from '../vuePlugin/search'
? export default {
? ? data() {
? ? ? return {
? ? ? ? searchList: ['草船借箭', '大富翁', '測(cè)試數(shù)據(jù)'],
? ? ? ? // 直接通過(guò)props傳遞對(duì)象 修改，挺便捷的,但是不規(guī)范
? ? ? ? selectValue: {
? ? ? ? ? data: '1'
? ? ? ? },
? ? ? ? // 通過(guò)emit修改，規(guī)范寫法
? ? ? ? selectValue2: ''
? ? ? }
? ? },
? ? mounted() {},
? ? methods: {
? ? ? pageGo(path) {
? ? ? ? this.$router.push('/' + path)
? ? ? },
? ? ? selectFunc(value) {
? ? ? ? this.selectValue2 = value
? ? ? ? console.log(this.selectValue)
? ? ? ? console.log(this.selectValue2)
? ? ? }
? ? },
? ? components: {
? ? ? Search
? ? }
? }
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: