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; } }); }), }, });
使用这个:
$state
是一个展开对象,因此不会有响应