HTML5-Tutorium: JavaScript: Hello World Vue 03

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

v03: index.html (HTML validate, CSS validate, Google PageSpeed)

Git-Repository, git checkout v03 (JavaScript)

Anwendungsfälle (Use Cases)

Gegenüber dem ersten und zweiten Teil des Vue-Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

Aufgabe

Aufgabe: Speichere den Zustand der Anwendung (Model) in Store-Objekten, um die künftige Modularisierung (Version v04) zu unterstützen.

In diesem Tutorium sollen die Daten in einem Store außerhalb der Komponenten gespeichert werden.

Mögliche Storekonzepte

• vuex (veraltet, wird nur noch gewartet, angeblich nicht mehr weiterentwickelt, aber Version 4 existiert)
• Pinia (der Nachfolger von vuex; einfacher zu benutzen; Vue-3- und Vue-2-Paradigmen werden unterstützt)
• ohne Bibliothek direkt mit ref, reactive und computed aus Vue 3.2 (vgl. Vue 3 — The New Store)

Wir verwenden Pinia.

Pinia

Zitat:

While our hand-rolled state management solution will suffice in simple scenarios, there are many more things to consider in large-scale production applications:

1. Stronger conventions for team collaboration
2. Integrating with the Vue DevTools, including timeline, in-component inspection, and time-travel debugging
3. Hot Module Replacement
4. Server-Side Rendering support

Pinia is a state management library that implements all of the above. It is maintained by the Vue core team, and works with both Vue 2 and Vue 3.

Existing users may be familiar with Vuex, the previous official state management library for Vue. With Pinia serving the same role in the ecosystem, Vuex is now in maintenance mode. It still works, but will no longer receive new features. It is recommended to use Pinia for new applications.

Pinia started out as an exploration of what the next iteration of Vuex could look like, incorporating many ideas from core team discussions for Vuex 5. Eventually, we realized that Pinia already implements most of what we wanted in Vuex 5, and decided to make it the new recommendation instead.

Compared to Vuex, Pinia provides a simpler API with less ceremony, offers Composition-API-style APIs, and most importantly, has solid type inference support when used with TypeScript.

Erstellen eines neuen Projektzweigs

Erstellen Sie einen neuen Projektzweig (branch) innerhalb von hello_world_vue:

git checkout v02     # Wechsle in den Branch v02
git checkout -b v03  # Klone v02 in einen neuen Branch v03
npm i

Initialisierung von Pinia

Pinia muss als reguläre Dependency installiert werden, da das Paket in den produktiven Code integriert wird.

npm i pinia  // NICHT  npm i -D pinia, da Pinia-Code an den Browser ausgeliefert werden muss

Pinia wird als Plugin in die App integriert. Dabei ist wichtig, dass das Pina-Plugin-Objekt vor dem eigentlichen App-Objekt erzeugt wird, da Komponenten der App, die Pinia verwenden, darauf angewiesen sind, dass die Pinia-Erzeugung vor der Komponenten-Initialisierung erfolgt.

// src/main.js

import { createPinia } from 'pinia'
import { createApp }   from 'vue'
import App             from './App.vue'

const pinia = createPinia() // before createApp(...)

window.addEventListener
( 'load',
  createApp(App).use(pinia).mount('#app')
)

Erstellen der Stores

Fügen Sie zunächst zwei weitere Aliase in die Datei vite.config.common.js ein:

 '/controller': fileURLToPath(new URL('./src/controller', import.meta.url)),
 '/service':    fileURLToPath(new URL('./src/service',    import.meta.url)),
 '/component':  fileURLToPath(new URL('./src/component',  import.meta.url)),
 '/store':      fileURLToPath(new URL('./src/store',      import.meta.url)),

Damit kann man Controller, Services. Komponenten und Stores immer mit absoluter Adressierung laden (z. B. in App.vue), ohne @ verwenden zu müssen.

StoreSession

Im Session-Store wird die Autofocus-ID gespeichert sowie welche Section der Single-Page-Anwendung dem Benutzer aktuell präsentiert wird.

// src/store/StoreSession.js

import { defineStore   } from 'pinia'
import { ref, reactive } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

  () =>
  { const
      section   = ref(''),
      autofocus = reactive({ setFocus: null }),

      init =
        p_section => { section.value = p_section },

      initAutofocus =
        (p_autofocus_id = null) =>
        { if (p_autofocus_id != null)
          { autofocus.setFocus = () => document.getElementById(p_autofocus_id).focus(),
            window.addEventListener('visibilitychange', autofocus.setFocus);
          }
        },

      setFocus =
        () => autofocus?.setFocus()

    return { init, initAutofocus, section, setFocus }
  }
)

export default storeSession

StoreGreeting

Im Greeting-Store werden die Daten zur Begrüßung des Benutzers gespeichert.

// src/store/StoreGreeting.js

import { defineStore }               from 'pinia'
import { reactive, toRef, computed } from 'vue'

const
  storeGreeting =
  defineStore
  ( 'greeting',

    () =>
    { const
        state =
          reactive({ name: '', stranger: 'Stranger', hello: 'Hello, $1!' }),

        init =
          (p_state = {}) =>
          { Object.assign(state, p_state) },

        name = 
          toRef(state, 'name'),

        reset =
          () => { name.value = '' },

        sayHello =
          p_name => state.hello.replace('$1', p_name),

        helloStranger =
          computed(() => sayHello(state.stranger)),

        hello =
          computed(() => sayHello(state.name))

      return { init, name, helloStranger, hello, reset }
    }
  )

export default storeGreeting

Einbinden der Stores in eine Komponente

<script setup>
  import { useId, onMounted, onUnmounted } from 'vue'
  import storeSession   from '/store/StoreSession'
  import storeGreeting  from '/store/StoreGreeting'
  import ControllerKeys from '/controller/ControllerKeys'

  const
    props           = defineProps ({ autofocus: { type: Boolean } }),
    inputId         = useId(),

    session         = storeSession(),
    greeting        = storeGreeting(),

    reset           = () => { greeting.reset(); session.setFocus() },
    sayHello        = () => session.section = 'hello',
    sayHelloOnEnter = new ControllerKeys('Enter', inputId, sayHello)

  session.init('form', props.autofocus ? inputId : null)
  //greeting.init({ hello: 'Hi, $1!', stranger: 'Nobody'})

  onMounted   ( () => sayHelloOnEnter.add()    )
  onUnmounted ( () => sayHelloOnEnter.remove() )
</script>

Zum Vergleich noch einmal das Skript ohne Store:

<!-- src/component/HelloWorld.vue without store -->
<script setup >
  import { useId, ref, computed, onMounted, onUnmounted } from 'vue'
  import ControllerKeys from '@/controller/ControllerKeys'

  const
    props         = defineProps ({ autofocus: { type: Boolean } }),
    inputId       = useId(),
    section       = ref('form'),
    helloStranger = ref('Hello, Stranger'),
    name          = ref(''),

    hello     = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
    sayHello  = () => section.value = 'hello',
    autoFocus = () => { if (props.autofocus)
                          document.getElementById(inputId).focus()
                      },
    reset     = () => { document.getElementById(inputId).value = '';
                        autoFocus();
                      },
    sayHelloOnEnter = new ControllerKeys('Enter', inputId, sayHello)

  onMounted  (...)
  onUnmounted(...)
</script>

Anpassung des Templates

Das Template muss angepasst werden. Man muss nun auf die Store-Objekte zugreifen.

Achtung, die Funktion reset aktivier nicht nur das Autofokus-Element, sondern löscht auch das NAmensfeld im StoreGreeting. Würde man in der Funktion reset auf den Aufruf von storeGreeting.reset() verzichten, würde der Input-Type reset im unten angegebenen Input-Buttons zwar den Inhalt Textfelds im Formular löschen, der zuvor eingegebenen Name stünde aber weiterhin im Greeting-Store. Die bereitet spätestens dann Probleme, wenn man den im Greeting-Store gespeicherten Namen auch a anderer Stelle verwendet.

<!-- src/components/HelloWorld.vue -->

<template>
  <section v-if="session.section==='form'">
    <h1>{{greeting.helloStranger}}</h1>
    <form>
      <div>
        <label :for="inputId">What´s your name?</label>
        <input :id="inputId" v-model="greeting.name" :autofocus>
      </div>
      <div>
        <input type="reset"  value="Reset"     @click="reset">
        <input type="button" value="Say hello" @click="sayHello">
      </div>
    </form>
  </section>
  <section v-if="session.section==='hello'">
    <h1>{{greeting.hello}}</h1>
    <p>Welcome to Full-Stack Web Development!</p>
  </section>
</template>

Fortsetzung des Tutoriums

Sie sollten nun Teil 4 des Vue-Tutoriums bearbeiten. Nun wird die Anwendung modularisiert.

Quellen

2. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)