用 Vue Function-based API 重寫你的組件的業(yè)務(wù)邏輯

_令人激動的 Vue Function-based API _

_Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API佃蚜。建議仔細(xì)閱讀這篇文章再來看這篇文章历筝。本文主要講述如何使用該 API 重新組織我們的組件與業(yè)務(wù)邏輯代碼楞卡，去除那令人討厭的 mixin 。
<a name="ZQpUo"></a>

1. 使用 Vue Function-based API 寫計(jì)數(shù)組件

<a name="SdXLZ"></a>

計(jì)數(shù)組件視圖與數(shù)據(jù)部分

<template>
  <div style="margin-top: 20px;">
    <span>count is <span class="emphasis">{{ count }}</span></span>
    <span>plusOne is <span class="emphasis">{{ plusOne }}</span></span>
    <el-button @click="increment">count++</el-button>
  </div>
</template>

<script>
import Vue from "vue";
import { value, computed, watch, onMounted } from "vue-function-api";
import useCout from "./cout.js";
export default {
  setup() {

    

    const { count, plusOne, increment } = useCout();
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    };
  }
};
</script>

<a name="fhfox"></a>

計(jì)數(shù)組件業(yè)務(wù)邏輯部分

cout.js

/* eslint-disable */
import {
  value,
  computed,
  watch,
  onMounted
} from "vue-function-api";

// 后端分頁邏輯
function useCout() {
  // reactive state
  const count = value(0);
  // computed state
  const plusOne = computed(() => count.value + 1);
  // method
  const increment = () => {
    count.value++;
  };
  // watch
  watch(
    () => count.value * 2,
    val => {
      console.log(`count * 2 is ${val}`);
    }
  );
  // lifecycle
  onMounted(() => {
    console.log(`mounted`);
  });
  return {
    count,
    plusOne,
    increment
  };
}

export default useCout

我們看到計(jì)數(shù)邏輯相關(guān)業(yè)務(wù)邏輯封裝在一個(gè)獨(dú)立的模塊中，與視圖層分離。避免了 vue 2.0 的 mixin 導(dǎo)致的屬性名或方法名命名沖突，模版中的數(shù)據(jù)來源不清晰等問題挪钓，獨(dú)立而又顯示的展示業(yè)務(wù)邏輯。
<a name="fvGXJ"></a>

2. 分頁組件

<a name="QYTJr"></a>

分頁組件視圖與數(shù)據(jù)部分

<template>
  <div>
    <div style="margin-top: 20px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <div style="margin-top: 20px;">
        <el-button @click="getDataList">取得數(shù)據(jù)</el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from "vue";
import { value, computed, watch, onMounted } from "vue-function-api";
import usePagination from "./pagination.js";
export default {
  setup() {
    // 請求數(shù)據(jù)
    const getDataList = () => {
      // setTotal(parseInt(Math.random() * 100));
      setTotal(68);
    };

    // pagination
    const {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
      handleSizeChange,
      setTotal
    } = usePagination(getDataList);
    
    // expose bindings on render context
    return {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
      handleSizeChange,
      setTotal,
      getDataList
    };
  }
};
</script>

<a name="t1yLW"></a>

計(jì)數(shù)組件業(yè)務(wù)邏輯部分

pagination.js

/* eslint-disable */
import { value, watch, onMounted } from 'vue-function-api'
// 后端分頁邏輯
function usePagination(changeCallback) {
  const currentPage = value(1);
  const total = value(0);
  const pageSize = value(10);
  const handleCurrentChange = (val) => {
    console.log(`當(dāng)前頁: ${val}`);
    currentPage.value = val;
    changeCallback()
  }

  const handleSizeChange = (val) => {
    console.log(`每頁 ${val} 條`);
    pageSize.value = val;
    changeCallback()
  }

  const setTotal = (val) => {
    total.value = val;
  }

  return {
    currentPage,
    pageSize,
    total,
    handleCurrentChange,
    handleSizeChange,
    setTotal
  }

}

export default usePagination

代碼 demo 地址：GitHub鏈接

讓我們可以使用 vue function API 的插件：Vue Function-based API
本文同步發(fā)表于語雀文檔：用 Vue Function-based API 重寫你的組件的業(yè)務(wù)邏輯