feat: add pinia stores (#170)

src/modules/pinia.ts

@@ -0,0 +1,15 @@
+import { createPinia } from 'pinia'
+import { UserModule } from '~/types'
+
+export const install: UserModule = ({ isClient, initialState, app }) => {
+  const pinia = createPinia()
+  app.use(pinia)
+  // Refer to
+  // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization
+  // for other serialization strategies.
+  if (isClient)
+    pinia.state.value = (initialState.pinia) || {}
+
+  else
+    initialState.pinia = pinia.state.value
+}

src/pages/hi/[name].vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { useUserStore } from '~/stores/user'
 
 const props = defineProps<{ name: string }>()
 const router = useRouter()
 const { t } = useI18n()
+const user = useUserStore()
+
+watch(() => props.name, (name) => {
+  user.setNewName(name)
+}, { immediate: true })
+
 </script>
 
 <template>
@@ -15,6 +22,17 @@ const { t } = useI18n()
     <p>
       {{ t('intro.hi', { name: props.name }) }}
     </p>
+    <template v-if="user.otherNames.length">
+      <p class="text-sm">
+        {{ t('intro.aka') }}:
+        <ul>
+          <li v-for="name in user.otherNames">
+            {{ name }}
+          </li>
+        </ul>
+      </p>
+    </template>
+
     <p class="text-sm opacity-50">
       <em>{{ t('intro.dynamic-route') }}</em>
     </p>

src/pages/index.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { useUserStore } from '~/stores/user'
 
-const name = ref('')
+const user = useUserStore()
+const name = ref(user.savedName)
 
 const router = useRouter()
 const go = () => {

src/stores/user.ts

@@ -0,0 +1,34 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  /**
+   * Current named of the user.
+   */
+  const savedName = ref('')
+  const previousNames = ref(new Set<string>())
+
+  const usedNames = computed(() => Array.from(previousNames.value))
+  const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
+
+  /**
+   * Changes the current name of the user and saves the one that was used
+   * before.
+   *
+   * @param name - new name to set
+   */
+  function setNewName(name: string) {
+    if (savedName.value)
+      previousNames.value.add(savedName.value)
+
+    savedName.value = name
+  }
+
+  return {
+    setNewName,
+    otherNames,
+    savedName,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))