On gists

Reactivity in composables

Popular ⭐ Vue.js

App.vue Raw #

<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>

TheBase.vue Raw #

<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>

TheA.vue Raw #

<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>

useTest.js Raw #

import { ref, watchEffect } from 'vue'

export default function useTest(getState) {
  const reactiveState = ref(getState())
  
  watchEffect(() => {
    reactiveState.value = getState()
  })
  
  return {
    state: reactiveState
  }
}

2way.vue Raw #

<!--
 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>