Vue3 - Композиция Функция против импорта {functionObject} из «модуля» - PullRequest
Новая
       56

Vue3 - Композиция Функция против импорта {functionObject} из «модуля»

1 голос
/ 28 апреля 2020

Итак, я только что прочитал новый API композиции RF C ( ссылка ). Здесь они сравнивают несколько методов для повторного использования кода между компонентами. При этом метод импорта из модуля не включен. Я предполагаю, что это потому, что они говорят о VueJS строго и в целях сравнения.

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

##search_module.js

let fnc = {
    perform_simple_search: function (str, arr) {
        let result = [];

        arr.forEach(value => {
            if (value.toString().toLocaleUpperCase().includes(str.toLocaleUpperCase()) || value.toString().toLocaleLowerCase().includes(str.toLocaleLowerCase())) {
                if (result.indexOf(value) === -1) {
                    result.push(value)
                }
            }
        });
    }
}

module.exports = {
    perform_simple_search: fnc.perform_simple_search
};

И где мне нужна была функция в компоненте, я просто импортировал ее так: 

import {perform_simple_search} from "../search_module";

И вот Теперь мой вопрос:

Зачем использовать составную функцию, если я могу просто импортировать функцию из модуля?

1 Ответ

1 голос
/ 28 апреля 2020

Дело не в этом.

Видите ли, ваша perform_simple_search функция действительно является частью логики c, которой можно делиться на протяжении всего проекта. Проблема в том, что он никогда не может инкапсулировать логические состояния c. И это то, что будет возможно с API композиции.

Вы сможете определять элементы состояния и методы внутри этих функций и повторно использовать этот логический элемент c с отслеживанием состояния в ваших компонентах. Представьте себе, что вы извлекаете этот кусок логики состояния с состоянием c в функцию, которую вы будете импортировать в различные компоненты, чтобы дать им возможность подсчета: 

setup() {
  const state = reactive({
    count: 0
  })

  function increment() {
    state.count++
  }

  return {
    state,
    increment
  }
}

Это было уже возможно с миксинами / слотами с областями видимости, но эти методы имели свои проблемы:

https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

...