../../_images/dahn-schalbennest.webp

Vuex (Store)#

Vuex ist schon mit der Vue Version 2, als Ergänzung entwickelt worden. Mit Vue 3 kam die neue Speicherverwaltung über Pinia hinzu. Oft, aber nicht immer ist Pinia die optimale Lösung, warum also nicht Vuex verwenden. Was zu beachten ist, wird mit dieser Station geklärt.

Nutzung#

Es muss installiert werden:

npm install vuex@next --save

Aufbau des Store#

Die allgemeine Sturktur eines Vuex-Store (hier passend zum MomentoMori-Beispiel, im Ordner »stores« als »momentomori_vuex.js« Oft wird store als Name verwendet. Um Namenskonflikte mit dem schon verwendeten Pinia-Store zu vermeiden wird nun ein etwas abgewandelter Name »vuexstore« verwendet:

import { createStore } from 'vuex'

export const vuexstore = createStore({
    state () {
      return {
        geburtstag: '01.01.2000',
        maxalter: 90
      }
    },
    getters: {
      geburtstag: state => state.geburtstag,
      maxalter: state => state.maxalter,
    },
    mutations: {},
    actions: {},
})

State liefert ein Objekt in der alle Variablen gehalten und für die interne Verarbeitung zur Verfügung gestellt. Die Werte können nicht direkt bearbeitet werden. Der Zugriff und die Manipulation erfolgt ausnahmslos über die Methonden:

  • getters (lesend),

  • mutations (schreibend/syncron ) und

  • actions (schreibend/asyncron).

Die Nutzung in einer Komponente setzte voraus, dass der »store« geladen wird. Die erweiterte Datei »main.js« sieht nun wie folgt aus:

 1import { createApp } from "vue";
 2import { createPinia } from "pinia";
 3import App from "./App.vue";
 4import router from "./router";
 5import {vuexstore} from './stores/momentomori_vuex.js';
 6
 7const app = createApp(App)
 8  .use(createPinia())
 9  .use(router)
10  .use(vuexstore)
11  .mount("#app");

Erste Version#

Auslesen der Startwerte, durch Nutzung der Getter-Methoden in der View »Exp006VuexLocalStorage.vue«:

 1<script>
 2import ExpBeschreibung from "@/components/ExpBeschreibung.vue";
 3
 4import { vuexstore } from "../stores/momentomori_vuex.js";
 5import { mapGetters, mapMutations } from 'vuex'
 6
 7export default {
 8    name: 'Exp006VuexLocalStorage',
 9    components: {
10        'ExpBeschreibung': ExpBeschreibung,
11    },
12    methods: {
13        ...mapGetters([
14            'geburtstag',
15        ])
16    },
17    computed: {
18        maxalter () {
19            return vuexstore.state.maxalter
20        }
21    }
22}
23
24</script>
25
26<template>
27  <div>
28    <h2>Merken, für die Ewigkeit</h2>
29    <ExpBeschreibung topic="- Momento Mori: Auch das Leben ist ein Lotteriespiel!" />
30    <ExpBeschreibung topic="- Daten aus dem Vuex-Store lesen oder dort speichern" />
31
32    <p>Ausgangswerte: {{ geburtstag() }} und {{ maxalter }}</p>
33
34</div>
35</template>

Momentaufnahme#

../../_images/mm-vuex-v1.png

Zweite Version#

In der Datei momentomori_vuex.js, wird durch den Einsatz von »mutations«, die Änderung der Werte im state realisiert.

import { createStore } from 'vuex'

export const vuexstore = createStore({
  state () {
    return {
      geburtstag: '01.01.2000',
      maxalter: 90
    }
  },
  getters: {
    geburtstag: state => state.geburtstag,
    maxalter: state => state.maxalter,
  },
  mutations: {
    setGeburtstag(state, newval) {
      state.geburtstag = newval;
    },
    setMaxAlter(state, newval) {
      state.maxalter = newval;
    }
  },
})

Die Formularfelder dazu, wie in den vorherigen Versionen, jeweils ein Feld für das Datum und Lebenserwartung.

Dafür die Anbindung/Nutzung des Store im Script-Block:

 1<script>
 2import ExpBeschreibung from "@/components/ExpBeschreibung.vue";
 3import { vuexstore } from "../stores/momentomori_vuex.js";
 4
 5export default {
 6  name: 'Exp006VuexLocalStorage',
 7  components: {
 8    'ExpBeschreibung': ExpBeschreibung,
 9  },
10  methods: {
11    setGeburtstag (e) {
12      vuexstore.commit('setGeburtstag', e.target.value)
13    },
14    setMaxAlter (e) {
15      vuexstore.commit('setMaxAlter', e.target.value)
16    }
17  },
18  computed: {
19    maxalter () {
20      return vuexstore.state.maxalter
21    },
22    geburtstag () {
23      return vuexstore.state.geburtstag
24    }
25  }
26}
27</script>

Und die Verwendung der Werte und Methoden im Template:

 1<template>
 2<div>
 3  <h2>Merken, für die Ewigkeit</h2>
 4  <ExpBeschreibung topic="- Momento Mori: Auch das Leben ist ein Lotteriespiel!" />
 5  <ExpBeschreibung topic="- Daten aus dem Vuex-Store lesen oder dort speichern" />
 6
 7  <p>{{ geburtstag}} #### {{ maxalter }}</p>
 8  <p>Geburtsdatum:
 9  <input type="text"
10     size="8"
11     :value="geburtstag"
12     @change="setGeburtstag"
13     />
14  &nbsp;Wie alt willst Du werden?
15  <input type="text"
16         size="3"
17        :value="maxalter"
18         @change="setMaxAlter"
19   />
20  </p>
21</div>
22</template>
23
24Momentaufnahme

../../_images/mm-vuex-v2.png