feature: play around with provide inject

src/App.vue

@@ -1,17 +1,30 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <p>{{ book }}</p>
+    <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
+import { useBook } from './features/useBook'
+import { provide, readonly } from 'vue'
 
 export default {
   name: 'App',
   components: {
     HelloWorld
+  },
+  setup() {
+    const { book, changeBookName } = useBook()
+
+    provide('book', readonly(book))
+    provide('changeBookName', changeBookName)
+
+    return {
+      book
+    }
   }
 }
 </script>

src/components/HelloWorld.vue

@@ -3,18 +3,26 @@
     <p>{{ width }}</p>
     <button @click="reportWidth">Show Width in Alert Box</button>
     <p>{{ widthDoubled }}</p>
+    <h2>Inject</h2>
+    <p>Book: {{ book }}</p>
+    <button @click="changeName('New Book')">Change Book Name</button>
   </div>
 </template>
 
 <script>
 import { useWindowWidth } from '../features/useWidth'
+import { inject } from 'vue'
 
 export default {
   setup() {
     const { width } = useWindowWidth()
+    const book = inject('book')
+    const changeBookName = inject('changeBookName')
 
     return {
-      width
+      width,
+      book,
+      changeBookName
     }
   },
   computed: {
@@ -23,6 +31,9 @@ export default {
     }
   },
   methods: {
+    changeName(title) {
+      this.book.title = title
+    },
     reportWidth() {
       alert(this.width)
     }

src/features/useBook.js

@@ -0,0 +1,20 @@
+import { reactive } from 'vue'
+
+// in provider
+export const useBook = () => {
+  const book = reactive({
+    title: 'Vue 3 Guide',
+    author: 'Vue Team'
+  })
+
+  function changeBookName(customName, $event) {
+    console.log(customName)
+    console.log($event)
+    book.title = customName || 'Vue 3 Advanced Guide'
+  }
+
+  return {
+    book,
+    changeBookName
+  }
+}