From 57a4f571091abbca4a219cf12768ab7c39b960cb Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 15:18:04 +0200
Subject: [PATCH] add provide and inject

---
 2021-07-30_composition-01-starting-setup/src/App.vue     | 5 +++--
 .../src/components/UserData.vue                          | 9 ++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/2021-07-30_composition-01-starting-setup/src/App.vue b/2021-07-30_composition-01-starting-setup/src/App.vue
index 703979e..fae66fc 100644
--- a/2021-07-30_composition-01-starting-setup/src/App.vue
+++ b/2021-07-30_composition-01-starting-setup/src/App.vue
@@ -3,7 +3,6 @@
     <user-data
       :first-name="user.firstName"
       :last-name="user.lastName"
-      :age="user.age"
     ></user-data>
     <button @click="setAge">Change Age</button>
     <div>
@@ -16,7 +15,7 @@
 </template>
 
 <script>
-import { reactive, computed, watch, ref } from 'vue';
+import { reactive, computed, watch, ref, provide } from 'vue';
 import UserData from './components/UserData';
 
 export default {
@@ -45,6 +44,8 @@ export default {
       return user.firstName + ' ' + user.lastName;
     });
 
+    provide('user-age', user.age);
+
     function setAge() {
       user.age = '25';
     }
diff --git a/2021-07-30_composition-01-starting-setup/src/components/UserData.vue b/2021-07-30_composition-01-starting-setup/src/components/UserData.vue
index ba9a70a..00778e2 100644
--- a/2021-07-30_composition-01-starting-setup/src/components/UserData.vue
+++ b/2021-07-30_composition-01-starting-setup/src/components/UserData.vue
@@ -4,16 +4,19 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 export default {
-  props: ['firstName', 'lastName', 'age'],
+  props: ['firstName', 'lastName'],
   setup(props) {
     const userName = computed(function() {
       return props.firstName + ' ' + props.lastName;
     });
 
+    const age = inject('user-age');
+
     return {
-      userName
+      userName,
+      age
     };
   }
 };