With pinia on VueJS, i use a store for my licences and a licences have a number who references to a project. The projects list with informations are in an other store. so i make getters in the licence store to get the informations of the projet (name, entreprise...).
But, when the page loading, the value of getters don't appears, and when i go in the extension on Vuejs Web browser for seeing my stores, the values appears. And I don't understand how to use the getters in my template ... I tried but no results....
I make a video to demonstrate my problem : https://www.youtube.com/watch?v=Er4xcQ-Mq2Y
Thanks for helping !
My viewpage :
<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>
The licence store 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;
}
});
}),
},
});