Getters in store with pinia don't loading

Viewed 914

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;
          }
        });
      }),
  },
});
1 Answers

use this:

const currentList = computed(() => {
  // removed: return useListLicenses2.$state.list
  return useListLicences2.list;
})

$state is an unwrap object so there will be no response

Related