Getter dengan pinia tidak boleh dimuatkan

Question

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

Answer 1

Gunakan ini:

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

$state ialah objek yang diperluaskan, jadi tiada tindak balas