admin管理员组文章数量:1323714
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.
Share Improve this question asked Oct 29, 2021 at 8:56 jska13jska13 1871 gold badge4 silver badges11 bronze badges 2-
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 asreturn putedValue
instead. – User 28 Commented Nov 1, 2021 at 9:18
3 Answers
Reset to default 1Like 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:
- 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
}
- 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>
本文标签: javascriptVuesjs 3 computed function in composition returns refImplStack Overflow
版权声明:本文标题:javascript - Vuesjs 3 computed function in composition returns refImpl - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742127748a2422018.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论