派發器抽離vue2單元件中的大量邏輯技巧

2022-07-27 18:00:26

概述

在vue2當中，我們寫的邏輯都是options設定物件，比較固定的寫法，方法，資料，都對應到各自的設定項當中，但是當一個元件的邏輯變得更加複雜，邏輯也越來越多的時候，這時候，我們一個元件避免不了要寫大量的邏輯程式碼，在2版本中，使用官方推薦的mixin可以解決一個元件邏輯過多的問題，現在記錄我在工作用用到的另外方法。

本質

在react中，我們使用redux，會接觸到對應的action，reducer,dispatch等等，通過派發對應事件型別，然後觸發對應邏輯修改，有點像釋出訂閱，哈哈，在這裡，借鑑react當中使用redux的思路，記錄vue2當中抽離邏輯程式碼的技巧。

具體實現

舉例就拿最經典的toodList來舉例

.components/ToodList/ToodList.vue

<template>
  <div>
    <input type="text" placeholder="請輸入關鍵字" 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

//主要定義時間觸發的型別常數
export const ACTION_TYPES = {
  del: "DEL",
  add: "ADD",
};

.components/ToodList/hook檔案下：

actionTypes.js

//派發器，通過action找到對應的事件處理邏輯，然後觸發
import { addTood, removeTood } from "./toodReducer";
import { ACTION_TYPES } from "./actionTypes";
//接收引數，vue元件上下文對應
export default function (ctx) {
  function dispatch(args) {
    const { type, payLoad } = args;
    //根據行為，觸發reducer中的對應邏輯
    switch (type) {
      case ACTION_TYPES.del:
        removeTood.bind(ctx)(payLoad);
        break;
      case ACTION_TYPES.add:
        addTood.bind(ctx)(payLoad);
        break;
      default:
        break;
    }
  }
  //返回繫結元件範例的函數
  return dispatch.bind(ctx);
}

.components/ToodList/hook檔案下：

toodReducer.js

//主要事件處理邏輯檔案（對應vue元件中的一個個method方法）
//新增一個tood
export function addTood(value) {
  const toodListItme = {
    title: value,
    complated: false,
    id: Date.now(),
  };
  this.list.push(toodListItme);
}
//刪除一個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: "第一項",
          complated: false,
          id: 1,
        },
        {
          title: "第二項",
          complated: false,
          id: 2,
        },
        {
          title: "第三項",
          complated: true,
          id: 3,
        },
      ],
    };
  },
  methods: {
  //邏輯程式碼全部抽離到外部進行處理，當前元件只需要關注檢視即可
    handelDel(item) {
      dispatch(this)({
        type: ACTION_TYPES.del,
        payLoad: item,
      });
    },
    addTood(value) {
      dispatch(this)({
        type: ACTION_TYPES.add,
        payLoad: value,
      });
    },
  },
};
</script>

總結

在vue2中在一個元件中寫過多程式碼還是很常見的，不好分離邏輯的地方就在this,因此避免一個檔案邏輯過多，可以試試這種方法，在vue3更新後，移除單檔案元件對this的過渡依賴，對應的compositionApi已經非常便於我們抽離單檔案邏輯程式碼了。

以上就是派發器抽離vue2單元件中的大量邏輯技巧的詳細內容，更多關於派發器vue2單元件邏輯抽離的資料請關注it145.com其它相關文章！

派發器抽離vue2單元件中的大量邏輯技巧

目錄

概述

本質

具體實現

總結

熱門文章