Vue3 Composition API中的提取和重用邏輯

時間 2020-06-02

標籤 vue3 vue composition api 提取重用邏輯简体版

原文原文鏈接

Vue3 Composition API能夠在大型項目中更好地組織代碼。然兒，隨着使用幾種不一樣的選項屬性切換到單一的setup 方法，許多開發人員面臨的問題是……javascript

這會不會更混亂，由於一切都在一個方法中vue

乍一看可能很容易，可是實際上只須要花一點點時間來編寫可重用的模塊化代碼。java

讓咱們來看看如何作到這一點。api

問題

Vue.js 2.x 的 Options API 是一種很是直觀的分隔代碼的方法模塊化

export default {
  data () {
    return {
      articles: [],
      searchParameters: []
    }
  },
  mounted () {
    this.articles = ArticlesAPI.loadArticles()
  },
  methods: {
    searchArticles (id) {
      return this.articles.filter(() => {
        // 一些搜索代碼
      })
    }
  }
}
複製代碼

問題是，若是一個組件中有數百行代碼，那麼就必須在多個部分data、methods、computed等中爲單個特性(例如搜索)添加代碼。ui

這意味着僅一項功能的代碼可能會分散分佈在數百行中，並分佈在幾個不一樣的位置，從而使其難以閱讀或調試。this

這只是Vue Composition API RFC中的一個示例，展現瞭如今如何按功能組織代碼。編碼

如今，這是使用新的Composition API的等效代碼。spa

import { ref, onMounted } from 'vue'

export default {
  setup () {
    const articles = ref([])
    const searchParameters = ref([])

    onMounted(() => {
      this.articles = ArticlesAPI.loadArticles()
    })

    const searchArticles = (id) => {
      return articles.filter(() => {
        // 一些搜索代碼
      })
    }

    return {
      articles,
      searchParameters,
      searchArticles
    }
  }
}
複製代碼

如今，爲了解決前面關於組織的問題，咱們來看看一個提取邏輯的好方法。設計

提取邏輯

咱們的最終目標是將每一個功能提取到本身的方法中。這樣一來，若是咱們想調試它，全部的代碼都在一個地方。

這很是簡單，可是最後咱們必須記住，若是咱們但願可以在模板中訪問數據，則仍然必須使用咱們的 setup 方法來返回數據。

咱們來建立新方法 useSearchArticles 並讓它返回咱們在 setup 方法中返回的全部東西。

const useSearchArticles = () => {
  const articles = ref([])
  const searchParameters = ref([])

  onMounted(() => {
    this.articles = ArticlesAPI.loadArticles()
  })

  const searchArticles = (id) => {
    return articles.filter(() => {
      // 一些搜索代碼
    })
  }

  return {
    articles,
    searchParameters,
    searchArticles
  }
}
複製代碼

如今，在咱們的 setup 方法中，咱們能夠經過調用咱們的方法來訪問屬性。並且，固然，咱們還必須記住從設 setup 法中返回它們。

export default {
  setup () {
    const { articles, searchParameters, searchArticles } = useSearchArticles()

    return {
      articles,
      searchParameters,
      searchArticles
    }
  }
}
複製代碼

在提取的邏輯中訪問組件屬性

Composition API 中的另外一個新變化是 this 引用的變化，這一變化意味着咱們不能再以相同的方式使用 prop、attributes 或 events。

簡而言之，咱們將必須使用 setup 方法的兩個參數來訪問 props，attribute，slot 或 emit 方法。若是咱們只使用 setup 方法，一個快速的虛擬組件多是這樣的。

export default {
  setup (props, context) {

    onMounted(() => {
      console.log(props)
      context.emit('event', 'payload')
    })
  }
}
複製代碼

可是如今咱們要提取咱們的邏輯，咱們要把咱們的邏輯包裝器方法也接受參數。經過這種方式，咱們能夠從 setup 方法傳遞咱們的 props 和 context 屬性，邏輯代碼能夠訪問它們。

const checkProps = (props, context) => {
  onMounted(() => {
    console.log(props)
    context.emit('event', 'payload')
  })
}
export default {
  setup (props, context) {
    checkProps(props, context)
  }
}
複製代碼

重用邏輯

最後，若是咱們要編寫一些邏輯，但願可以在多個組件中使用，則能夠將邏輯提取到其本身的文件中，並將其導入到咱們的組件中。

而後，咱們能夠像以前同樣調用該方法。假設咱們將咱們的 useSearchArticles 方法移至名爲 use-search-articles-logic.js 的文件中，以下所示

import { ref, onMounted } from 'vue'
export function useSearchArticles () {
  const articles = ref([])
  const searchParameters = ref([])

  onMounted(() => {
    this.articles = ArticlesAPI.loadArticles()
  })

  const searchArticles = (id) => {
    return articles.filter(() => {
      // 一些搜索代碼
    })
  }

  return {
    articles,
    searchParameters,
    searchArticles
  }
}
複製代碼

使用這個新文件，咱們的原始組件將看起來像這樣

import { useSearchArticles } from './logic/use-search-articles-logic'
export default {
  setup (props,) {
    const { articles, searchParameters, searchArticles } = useSearchArticles()

    return {
      articles,
      searchParameters,
      searchArticles
    }
  }
}
複製代碼