Skip to content

Instantly share code, notes, and snippets.

@Kcko
Last active May 11, 2024 17:14
Show Gist options
  • Save Kcko/034e7cce31b7a152f73f7286018b38a5 to your computer and use it in GitHub Desktop.
Save Kcko/034e7cce31b7a152f73f7286018b38a5 to your computer and use it in GitHub Desktop.
// 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