Skip to content

Instantly share code, notes, and snippets.

@Kcko
Last active July 10, 2025 07:31
Show Gist options
  • Save Kcko/c3e7632f441970d46aa37e5d63137b35 to your computer and use it in GitHub Desktop.
Save Kcko/c3e7632f441970d46aa37e5d63137b35 to your computer and use it in GitHub Desktop.
<!--
https://www.youtube.com/watch?v=0L6GXC5jl1I
-->
<script setup>
import { ref, computed, toValue } from 'vue'
function useName(name) {
const changedName = computed(() => toValue(name).toUpperCase())
return {
changedName
}
}
const msg = ref('Hello World!')
const { changedName } = useName(() => msg.value) // getter: nebo props () => props.neco
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
{{ changedName }}
</template>
<template>
<TheBase :state="state" />
</template>
<script setup>
import { ref } from 'vue'
import TheBase from './TheBase.vue'
const state = ref(111)
setTimeout(() => {
state.value = 222
}, 2000)
</script>
<script setup>
import { computed } from 'vue'
import useTest from './useTest.js'
const props = defineProps({
state: Number
})
// POZOR
// bud predam getter a pak musim mit v composablu watcher viz nic, nebo nepotrebuju getter
// a misto nej predam toRef nebo computed
// useTest(computed(() => props.state))
// useTest(toRef(props, 'state'))
// Nebo to mit v composable pres computed a muzu tam posilat getter nebo ref a pak pres toValue, viz 2 priklad
const { state: state2 } = useTest(() => props.state)
</script>
<template>
<div>
TheA -> {{ state }} and from compposable
{{ state2 }}
</div>
</template>
<template>
<div>
{{ state }}
<hr>
<TheA :state="state" />
</div>
</template>
<script setup>
import { toRefs, ref, computed } from 'vue'
import TheA from './TheA.vue'
const props = defineProps({
state: {
type: Number
}
})
</script>
import { ref, watchEffect } from 'vue'
export default function useTest(getState) {
const reactiveState = ref(getState())
watchEffect(() => {
reactiveState.value = getState()
})
return {
state: reactiveState
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment