Last active
May 11, 2024 17:14
-
-
Save Kcko/034e7cce31b7a152f73f7286018b38a5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Composable | |
const useBurger = () => { | |
const lettuce = ref(true); | |
const ketchup = ref(true); | |
return { | |
lettuce, | |
ketchup, | |
} | |
// Component | |
setup() { | |
// We can destructure but still keep our reactivity | |
const { ketchup } = useBurger(); | |
watchEffect(() => console.log(ketchup.value)); | |
return { | |
ketchup, | |
removeKetchup: () => ketchup.value = false | |
}; | |
} | |
// If you don't want to destructure the values, you can always wrap it in reactive and it | |
// will be converted to a reactive object | |
// Component | |
setup() { | |
// Wrap in `reactive` to make it a reactive object | |
const burger = reactive(useBurger()); | |
watchEffect(() => console.log(burger.ketchup)); | |
return { | |
burger, | |
removeKetchup: () => burger.ketchup = false | |
} | |
} | |
// destruct needs toRefs | |
const refBurger = ref({ lettuce: true }); | |
const reactiveBurger = reactive({ lettuce: true }); | |
const { lettuce } = toRefs(refBurger.value); | |
const { lettuce } = toRefs(reactiveBurger); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment