Getter mit Pinia können nicht geladen werden
Mit Pinia auf VueJS verwende ich einen Store, um meine Lizenzen zu speichern, und die Lizenzen haben eine Nummer, die auf das Projekt verweist. Artikellisten mit Informationen finden Sie in anderen Geschäften. Deshalb habe ich im Lizenzspeicher Getter erstellt, um die Projektinformationen (Name, Firma ...) abzurufen.
Wenn die Seite jedoch geladen wird, werden die Werte für die Getter nicht angezeigt. Wenn ich die Vuejs-Webbrowser-Erweiterung aufrufe, um meinen Shop anzuzeigen, werden die Werte jedoch angezeigt. Und ich verstehe nicht, wie man Getter in Vorlagen verwendet ... Ich habe es versucht, aber kein Ergebnis ...
Ich habe ein Video gemacht, um mein Problem zu veranschaulichen: https://www.youtube.com/watch?v=Er4xcQ-Mq2Y
Danke für deine Hilfe!
Meine Browserseite:
<h1>Licences actives (de type "DEV")</h1>
<table>
<tr>
<th>Numero/Clé</th>
<th>Fin d'activation</th>
<th>type</th>
<th>Entreprise</th>
<th>N° d'Affaire<br />(Projet)</th>
<th>Projet</th>
<th>Responsable</th>
<th>Version</th>
<th>Version Soft</th>
<th>Durée restante <br />(jours)</th>
</tr>
<tr v-for="article in currentList" :key="article.numero">
<td style="color: red">{{ article.numero }}</td>
<td>{{ Date_formate(new Date(article.fin_activation)) }}</td>
<td>{{ article.type }}</td>
<td style="color: red">{{ article.entreprise }}</td>
<td>{{ article.affaire }}</td>
<td>{{ article.name }}</td>
<td>{{ article.responsable }}</td>
<td>{{ article.version }}</td>
<td>{{ article.version_soft }}</td>
<td>
{{
Math.round((new Date(article.fin_activation) - Date.now()) / 86400000)
}}
</td>
</tr>
<br />
</table>
</template>
<script setup>
import { computed, onMounted, ref } from "@vue/runtime-core";
import { useListLicences } from "../stores/licence";
import { Date_formate } from "../plugin/functions";
const useListLicences2 = useListLicences();
const currentList = computed(() => {
return useListLicences2.$state.list;
</script>
Lizenzspeicher in src/stores:
import { defineStore } from "pinia";
import { useListProjets } from "./projets";
const entreprises = useListEntreprises();
const projets = useListProjets();
export const useListLicences = defineStore({
id: "licences",
state: () => ({
list: [],
}),
persist: true,
getters: {
getList: (state) => state.list,
getName: (state) => //pour afficher Projet dans le tableau
state.list.map((licence) => {
projets.list.map((projet) => {
if (licence.projet_affaire == projet.affaire) {
return licence.name = projet.projetNom;
}
});
}),
getResponsable: (state) => //pour afficher Responsable
state.list.map((licence) => {
projets.list.map((projet) => {
if (licence.projet_affaire == projet.affaire) {
return licence.responsable = projet.userPseudo;
}
});
}),
getEntreprise: (state) => //pour afficher Entreprise
state.list.map((licence) => {
projets.list.map((projet) => {
if (licence.projet_affaire == projet.affaire) {
return licence.entreprise = projet.entrepriseNom;
}
});
}),
getAffaire: (state) => //pour afficher le Num d'affaire
state.list.map((licence) => {
projets.list.map((projet) => {
if (licence.projet_affaire == projet.affaire) {
return licence.affaire = projet.affaire;
}
});
}),
getID_Entreprise: (state) =>
state.list.map((licence) => {
entreprises.list.map((entreprise) => {
if (licence.entreprise == entreprise.entreprise_nom) {
return licence.ID_entreprise = entreprise.id;
}
});
}),
getContacts: (state) =>
state.list.map((licence) => {
projets.list.map((projet) => {
if (licence.projet_affaire == projet.affaire) {
return licence.contact1 = projet.email1;
}
});
}),
},
});