feat: add pinia stores (antfu-collective#170)

locales/en.yml

@@ -9,5 +9,6 @@ intro:
   desc: Opinionated Vite Starter Template
   dynamic-route: Demo of dynamic route
   hi: Hi, {name}!
+  aka: Also known as
   whats-your-name: What's your name?
 not-found: Not found

locales/es.yml

@@ -9,5 +9,6 @@ intro:
   desc: Plantilla de Inicio de Vite Dogmática
   dynamic-route: Demo de ruta dinámica
   hi: ¡Hola, {name}!
+  aka: También conocido como
   whats-your-name: ¿Cómo te llamas?
 not-found: No se ha encontrado

locales/fr.yml

@@ -9,5 +9,6 @@ intro:
   desc: Exemple d'application Vite
   dynamic-route: Démo de route dynamique
   hi: Salut, {name}!
+  aka: Aussi connu sous le nom de
   whats-your-name: Comment t'appelles-tu ?
 not-found: Page non trouvée

locales/pt-BR.yml

@@ -9,5 +9,6 @@ intro:
   desc: Modelo Opinativo de Partida de Vite
   dynamic-route: Demonstração de rota dinâmica
   hi: Olá, {name}!
+  aka: Também conhecido como
   whats-your-name: Qual é o seu nome?
 not-found: Não encontrado

locales/zh-CN.yml

@@ -9,5 +9,6 @@ intro:
   desc: 固执己见的 Vite 项目模板
   dynamic-route: 动态路由演示
   hi: 你好，{name}
+  aka: 也叫
   whats-your-name: 输入你的名字
 not-found: 未找到页面

package.json

@@ -10,6 +10,7 @@
     "@vueuse/core": "^6.0.0",
     "@vueuse/head": "^0.6.0",
     "nprogress": "^0.2.0",
+    "pinia": "^2.0.0-0",
     "prism-theme-vars": "^0.2.2",
     "vue": "^3.2.2",
     "vue-demi": "^0.11.3",
@@ -22,7 +23,6 @@
     "@iconify/json": "^1.1.387",
     "@intlify/vite-plugin-vue-i18n": "^2.4.0",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@vitejs/plugin-vue": "^1.4.0",
     "@vue/compiler-sfc": "^3.2.2",
     "@vue/server-renderer": "^3.2.2",

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))