feat(alpine): add context Alpine.store() example (#316)

Co-authored-by: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com>

Author: coderkearns

README.md

@@ -434,7 +434,7 @@ How do we solve this ? Developers love having framework overview by examples. It
   <summary>
     <img width="18" height="18" src="static/framework/alpine.svg" />
     <b>Alpine</b>
-    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />
+    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />
   </summary>
 
 - [x] Reactivity
@@ -451,12 +451,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox

content/4-component-composition/5-context/alpine/index.html

@@ -0,0 +1,29 @@
+<!-- x-text must be called on or inside an x-data block. -->
+<!-- The two could have a shared parent with x-data, or each could individually have x-data like so: -->
+
+<h1 x-data>
+  Welcome back, <span x-text="$store.user.username">unknown user</span>
+</h1>
+
+<div x-data>
+  <h2>My Profile</h2>
+  <p>Username: <span x-text="$store.user.username"></span></p>
+  <p>Email: <span x-text="$store.user.email"></span></p>
+  <button @click="$store.user.updateUsername('Jane')">
+    Update username to Jane
+  </button>
+</div>
+
+<script>
+  document.addEventListener("alpine:init", () => {
+    Alpine.store("user", {
+      id: 1,
+      username: "unicorn42",
+      email: "unicorn42@example.com",
+
+      updateUsername(newUsername) {
+        this.username = newUsername;
+      },
+    });
+  });
+</script>