i'm trying to use a puted function in Vuejs 3 externalized in a .js file using position.

Here my .vue file, it's very simple : a count variable that is incremented to trigger the puted function.

<template>
  <div>
    {{ putedCount }}
  </div>
</template>

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

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

And here is my useComputed.js file :

import { puted } from 'vue'

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

The function simply mutliply the value given in parameter by 5. The problem is that the console.log(putedCount) gives a

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

And in the template, it displays { "putedValue": 5 } So, the function doesn't return the value of the multiplied by 5 parameter, but a wrapper object refImpl.

The exemple is adapted from the documentation : Composition doc

If I declare the puted function in the tag in the .vue file directly without importing it from another file, it works well as expected : the function returns the count value multiplied by 5.

Obviously, that is something I don't understand clearly...but what ?

I'm using 3.2 and the tag, so the return from setup() in the script tag in no longer needed : 3.2

Thank you in adavnce.

i'm trying to use a puted function in Vuejs 3 externalized in a .js file using position.

Here my .vue file, it's very simple : a count variable that is incremented to trigger the puted function.

<template>
  <div>
    {{ putedCount }}
  </div>
</template>

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

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

And here is my useComputed.js file :

import { puted } from 'vue'

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

The function simply mutliply the value given in parameter by 5. The problem is that the console.log(putedCount) gives a

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

And in the template, it displays { "putedValue": 5 } So, the function doesn't return the value of the multiplied by 5 parameter, but a wrapper object refImpl.

The exemple is adapted from the documentation : Composition doc

If I declare the puted function in the tag in the .vue file directly without importing it from another file, it works well as expected : the function returns the count value multiplied by 5.

Obviously, that is something I don't understand clearly...but what ?

I'm using 3.2 and the tag, so the return from setup() in the script tag in no longer needed : 3.2

Thank you in adavnce.

• javascript
• vuejs3
• vue-position-api
• puted-properties

• EDIT: it works well if I put the declaration of count in the useComputed.js file and export it. – jska13 Commented Oct 29, 2021 at 9:36
• I think it should be const { putedCount } = useComputedValue(count). Or export it as return putedValue instead. – User 28 Commented Nov 1, 2021 at 9:18

3 Answers 3

Like this? It would help if you used .value to access the value of puted. In the reactive object, accessing the ref object will directly return the .value attribute. The values accessed in the template syntax are all attributes of a reactive object, so .value is unnecessary. but in console.log it needs .value.

<template>
  <div>
    {{ putedCount }}
  </div>
</template>

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

  const count = ref(0) // Instanciate the count variable
  count.value += 1 // Trigger the pute
  const { putedValue:putedCount } = useComputedValue(count)
  console.debug(putedCount.value)
</script>

You're returning the function itself. If you're outside of the template, you need to return putedCount.value

because the function useComputedValue is returning an object of the form { putedCount: ComputedRef<number> } so vue and console.debug are working properly. all correct but it seems that what you are looking for is puted returned you will have 2 workarounds:

1. Edit file ./js/useComputed (remend this if you want the correct filename meaning)

import { puted } from 'vue'

export default function useComputedValue(count) {
  const putedValue = puted(() => count.value * 5)
  // return {
  //  putedValue,
  //}
  return putedValue
}

2. Edit file <vue> (remend this if you extend the function)

<template>
  <div>
    {{ putedCount }}
  </div>
</template>

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

const count = ref(0) // Instanciate the count variable
count.value += 1 // Trigger the pute
// const putedCount = useComputedValue(count)
const { putedValue: putedCount } = useComputedValue(count)
console.debug(putedCount)
</script>