feat: add pinia

pages/hi/[id].vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-const route = useRoute()
+import { useUserStore } from '~/stores/user'
 
+const route = useRoute()
+const user = useUserStore()
 const name = route.params.id
+
+watchEffect(() => {
+  user.setNewName(route.params.id as string)
+})
 </script>
 
 <template>
@@ -14,6 +20,19 @@ const name = route.params.id
       {{ name }}!
     </div>
 
+    <template v-if="user.otherNames.length">
+      <p text-sm my-4>
+        <span op-50>Also as known as:</span>
+        <ul>
+          <li v-for="otherName in user.otherNames" :key="otherName">
+            <router-link :to="`/hi/${otherName}`" replace>
+              {{ otherName }}
+            </router-link>
+          </li>
+        </ul>
+      </p>
+    </template>
+
     <Counter />
 
     <div>