开发者问题收集

带有pinia商店的获取器不加载

2022-06-02
3117

使用 VueJS 上的 pinia,我使用商店来存储我的许可证,许可证有一个引用项目的编号。项目列表及其信息位于另一个商店中。 因此,我在许可证商店中创建 getter 来获取项目信息(名称、企业……)。

但是,当页面加载时,getter 的值不会出现,而当我进入 Vuejs Web 浏览器上的扩展来查看我的商店时,值就会出现。而且我不明白如何在我的模板中使用 getter...我试过了,但没有结果....

我制作了一个视频来演示我的问题: https://www.youtube.com/watch?v=Er4xcQ-Mq2Y

谢谢你的帮助!

我的浏览页面:

  <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>

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个回答

使用以下内容:

632411274

$ state 是一个未包装对象,因此不会有响应

Tachibana Shin
2022-06-02