Getter mit Pinia können nicht geladen werden

Question

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

Answer 1

使用这个：

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

$state 是一个展开对象，因此不会有响应