Dengan pinia pada VueJS, saya menggunakan kedai untuk menyimpan lesen saya, dan lesen mempunyai nombor yang merujuk kepada projek. Senarai item dengan maklumat terletak di kedai lain. Jadi saya mencipta getter di kedai lesen untuk mendapatkan maklumat projek (nama, syarikat...).
Walau bagaimanapun, apabila halaman dimuatkan, nilai untuk pengambil tidak muncul, apabila saya pergi ke sambungan penyemak imbas web Vuejs untuk melihat kedai saya, nilai itu muncul. Dan saya tidak faham cara menggunakan getter dalam templat... Saya cuba tetapi tiada hasil...
Saya membuat video untuk menunjukkan masalah saya: https://www.youtube.com/watch?v=Er4xcQ-Mq2Y
Terima kasih atas bantuan anda!
Halaman penyemakan imbas saya:
<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>
Kedai lesen di src/kedai:
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; } }); }), }, });
Gunakan ini:
$state
ialah objek yang diperluaskan, jadi tiada tindak balas