Как переиспользовать computed свойства во Vue Composition API?

Question

Есть компонент CollectionBlock.vue, куда передаю props :collection

import useFilmsCount from "@/composables/useFilmsCount";

export default {
  props: {
    collection: Object
  },
  setup({collection}) {
    const {filmsCount} = useFilmsCount()

    return {
      filmsCount
    }
  }
}

и есть computed свойство, которое используется в нескольких компонентах, поэтому я поместил его в отдельный переиспользуемый модуль useFilmsCount.js:

import {computed} from "vue";

export default function useFilmsCount() {
  
  const filmsCount = computed(() => {
    const lastNumber = +collection.films_count.toString().slice(-1)
    let textFilms = ' фильм'
    if (lastNumber >= 2 && lastNumber <= 4) {
      textFilms += 'а'
    } else if ((lastNumber >= 5 && lastNumber <= 9) || lastNumber === 0) {
      textFilms += 'ов'
    }

    return collection.films_count + textFilms
  })

  return {
    filmsCount
  }
}

но данное computed свойство не видит props collection, а если я его просто передам в модуль const {filmsCount} = useFilmsCount(collection) то переданный параметр будет статичным, и при изменении пропса, computed свойство никак меняться не будет.

Как это исправить?

Answer 1

Дело в деструктуризации пропсов setup({collection}). Если этого не делать и передавать пропсы в модуль как есть, то реактивность сохраняется и всё работает как надо

import useFilmsCount from "@/composables/useFilmsCount";

export default {
  props: {
    collection: Object
  },
  setup(props) {
    const {filmsCount} = useFilmsCount(props)

    return {
      filmsCount
    }
  }
}

БЛОГ НА HUSL

Как переиспользовать computed свойства во Vue Composition API?

Ответы (1 шт):