Как передать параметры в composable instance в Vue3?

В Vue 3 мы можем передавать параметры в composable-функцию с использованием композиционного API.

Composable-функции это функции, которые могут быть использованы повторно в разных компонентах Vue. Они позволяют упростить код и сделать его более модульным. Композиционный API в Vue 3 предоставляет несколько способов передать параметры в composable-функцию.

Передача параметров через аргументы функции:

import { ref } from 'vue';

function useComposable(param) {
  const data = ref(param);

  // Остальной код

  return {
    data,
    // Другие экспортируемые элементы
  };
}

При использовании этого composable в компоненте, параметр можно передать как аргумент при вызове composable-функции:

import { useComposable } from './useComposable';

export default {
  setup() {
    const { data } = useComposable('Переданный параметр');

    // Остальной код компонента

    return {
      data,
    };
  },
};

С использованием provide и inject:

provide и inject позволяют нам передавать параметры через родительский компонент и использовать их в дочерних компонентах и composable-функциях.

import { provide, inject } from 'vue';

function useComposable() {
  const data = inject('param');

  // Остальной код

  return {
    data,
    // Другие экспортируемые элементы
  };
}

export default {
  setup() {
    provide('param', 'Переданный параметр');
    const { data } = useComposable();

    // Остальной код компонента

    return {
      data,
    };
  },
};

Здесь мы используем provide для передачи параметра 'Переданный параметр' в родительском компоненте. Затем мы используем inject в composable-функции для получения переданного параметра.

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