Getter dengan pinia tidak boleh dimuatkan
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;
}
});
}),
},
});