Блог

я пытаюсь использовать вычисляемую функцию в Vuejs 3, внешнюю в файле .js, используя композицию.

Вот мой файл .vue, это очень просто : переменная count, которая увеличивается для запуска вычисляемой функции.

 <template>
  <div>
    {{ computedCount }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useComputedValue from './js/useComputed' // Import computed function

const count = ref(0) // Instanciate the count variable
count.value  = 1 // Trigger the compute
const computedCount = useComputedValue(count)
console.debug(computedCount)
</script>

 

И вот мой useComputed.js файл :

 import { computed } from 'vue'

export default function useComputedValue(count) {
  const computedValue = computed(() => count.value * 5)
  return {
    computedValue,
  }
}

 

Функция просто мутлизует значение, указанное в параметре 5.
Проблема в том, что console.log(computedCount) выдает

 {computedValue: ComputedRefImpl}
computedValue: ComputedRefImpl {dep: Set(1), _dirty: false, __v_isRef: true, effect: ReactiveEffect, _setter: ƒ, …}
[[Prototype]]: Object

 

И в шаблоне он отображает { «Вычисленное значение»: 5 }
Таким образом, функция не возвращает значение параметра, умноженное на 5, но объект-обертка снова преобразуется.

Пример адаптирован из документации : Composition doc

Если я объявлю вычисляемую функцию в теге в файле .vue напрямую, не импортируя ее из другого файла, она будет работать так, как и ожидалось : функция возвращает значение счетчика, умноженное на 5.

Очевидно, что это то, чего я не совсем понимаю…но что ?

Я использую 3.2 и тег, поэтому возврат из setup() в теге сценария больше не требуется : 3.2

Спасибо вам в адавнсе.