Извлечение и повторное использование логики в Vue3 Composition API

Vue.js
Извлечение и повторное использование логики в Vue3 Composition API

Vue3 Composition API позволяет лучше организовать код в больших проектах. Однако при использовании нескольких разных параметров свойства переключаются на одинsetupподход, проблема, с которой сталкиваются многие разработчики, заключается в...

Не будет ли это более запутанным, поскольку все находится в одном методе?

На первый взгляд это может показаться простым, но на самом деле для написания повторно используемого модульного кода требуется совсем немного времени.

Давайте посмотрим, как это сделать.

вопрос

API параметров Vue.js 2.x — это очень интуитивно понятный способ разделения кода.

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

Проблема в том, что если в компоненте сотни строк кода, то приходится добавлять код для одной функции (например, поиска) в несколько разделов данных, методов, вычисляемых и т. д.

Это означает, что код только одной функции может быть разбросан по сотням строк и в нескольких разных местах, что затрудняет его чтение или отладку.

Это просто пример из Vue Composition API RFC, показывающий, как код теперь организован по функциям.

Теперь это эквивалентный код, использующий новый Composition API.

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
    }
  }
}

наконец

Надеюсь, эта статья помогла вам лучше понять, как Composition API изменит способ написания кода.

Но, как всегда, организация проекта зависит от готовности разработчика разработать отличный код компонентов и создать повторно используемую логику.

Помните, наша цель — улучшить читаемость, и в Vue Composition API — отличный способ сделать это.

оригинал:узнать V UE.co/2020/03/ext…

автор:Matt Maribojoc

Официальный аккаунт будет выпущен в приоритете на два-три дня, так что будьте внимательны! Также есть отличная подарочная упаковка!

Категории