快捷導(dǎo)航

派發(fā)器抽離vue2單組件中的大量邏輯技巧

更新時(shí)間：2022年07月27日 15:01:13 作者：陌年微涼_

這篇文章主要為大家介紹了派發(fā)器抽離vue2單組件中的大量邏輯技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

概述

在vue2當(dāng)中，我們寫的邏輯都是options配置對象，比較固定的寫法，方法，數(shù)據(jù)，都對應(yīng)到各自的配置項(xiàng)當(dāng)中，但是當(dāng)一個(gè)組件的邏輯變得更加復(fù)雜，邏輯也越來越多的時(shí)候，這時(shí)候，我們一個(gè)組件避免不了要寫大量的邏輯代碼，在2版本中，使用官方推薦的mixin可以解決一個(gè)組件邏輯過多的問題，現(xiàn)在記錄我在工作用用到的另外方法。

本質(zhì)

在react中，我們使用redux，會(huì)接觸到對應(yīng)的action，reducer,dispatch等等，通過派發(fā)對應(yīng)事件類型，然后觸發(fā)對應(yīng)邏輯修改，有點(diǎn)像發(fā)布訂閱，哈哈，在這里，借鑒react當(dāng)中使用redux的思路，記錄vue2當(dāng)中抽離邏輯代碼的技巧。

具體實(shí)現(xiàn)

舉例就拿最經(jīng)典的toodList來舉例

.components/ToodList/ToodList.vue

<template>
  <div>
    <input type="text" placeholder="請輸入關(guān)鍵字" v-model="value" /><button
      @click="handleAddTood"
    >
      操作按鈕
    </button>
    <tood-list-item
      v-for="item in list"
      :key="item.id"
      :item="item"
      @handleDel="handleDel"
    ></tood-list-item>
  </div>
</template>
<script>
import ToodListItem from "./ToodListItem";
export default {
  components: {
    ToodListItem,
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    handleDel(item) {
      this.$emit("handelDel", item);
    },
    handleAddTood() {
      this.$emit("addTood", this.value);
    },
  },
};
</script>

.components/ToodList/ToodListItem.vue

<template>
  <div>
    <input type="checkbox" v-model="item.complated" />
    <span
      :style="{ textDecoration: item.complated ? 'line-through' : 'none' }"
      >{{ item.title }}</span
    >
    <button @click="handleDel(item)">刪除</button>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    handleDel(item) {
      this.$emit("handleDel", item);
    },
  },
};
</script>

.components/ToodList/hook文件下：

actionTypes.js

//主要定義時(shí)間觸發(fā)的類型常量
export const ACTION_TYPES = {
  del: "DEL",
  add: "ADD",
};

.components/ToodList/hook文件下：

actionTypes.js

//派發(fā)器，通過action找到對應(yīng)的事件處理邏輯，然后觸發(fā)
import { addTood, removeTood } from "./toodReducer";
import { ACTION_TYPES } from "./actionTypes";
//接收參數(shù)，vue組件上下文對應(yīng)
export default function (ctx) {
  function dispatch(args) {
    const { type, payLoad } = args;
    //根據(jù)行為，觸發(fā)reducer中的對應(yīng)邏輯
    switch (type) {
      case ACTION_TYPES.del:
        removeTood.bind(ctx)(payLoad);
        break;
      case ACTION_TYPES.add:
        addTood.bind(ctx)(payLoad);
        break;
      default:
        break;
    }
  }
  //返回綁定組件實(shí)例的函數(shù)
  return dispatch.bind(ctx);
}

.components/ToodList/hook文件下：

toodReducer.js

//主要事件處理邏輯文件（對應(yīng)vue組件中的一個(gè)個(gè)method方法）
//添加一個(gè)tood
export function addTood(value) {
  const toodListItme = {
    title: value,
    complated: false,
    id: Date.now(),
  };
  this.list.push(toodListItme);
}
//刪除一個(gè)tood
export function removeTood(item) {
  const { id } = item;
  this.list = this.list.filter((item) => item.id != id);
}

App.vue文件

<template>
  <div id="app">
    <tood-list
      :list="list"
      @handelDel="handelDel"
      @addTood="addTood"
    ></tood-list>
  </div>
</template>
<script>
import ToodList from "@/components/ToodList/ToodList.vue";
import dispatch from "./components/ToodList/hook/dispatch";
import { ACTION_TYPES } from "./components/ToodList/hook/actionTypes";
export default {
  name: "App",
  components: {
    ToodList,
  },
  data() {
    return {
      list: [
        {
          title: "第一項(xiàng)",
          complated: false,
          id: 1,
        },
        {
          title: "第二項(xiàng)",
          complated: false,
          id: 2,
        },
        {
          title: "第三項(xiàng)",
          complated: true,
          id: 3,
        },
      ],
    };
  },
  methods: {
  //邏輯代碼全部抽離到外部進(jìn)行處理，當(dāng)前組件只需要關(guān)注視圖即可
    handelDel(item) {
      dispatch(this)({
        type: ACTION_TYPES.del,
        payLoad: item,
      });
    },
    addTood(value) {
      dispatch(this)({
        type: ACTION_TYPES.add,
        payLoad: value,
      });
    },
  },
};
</script>