Refs & computed

Dans Quasar, les magasins se trouvent dans le dossier src/store/. Et sont organisés en modules.

Les modules sont ensuite importés dans Quasar via le fichier src/store/index.js

Les modules JavaScript - JavaScript | MDNMDN Web Docs

Création du magasin des tâches

Créer un nouveau fichier src/store/store-taches.js et y ajouter le code suivant :

src/store/store-taches.js

import { defineStore } from 'pinia'

export const useTachesStore = defineStore('tâches', () => {
  return {}
})

Il faut ensuite l'importer dans notre page PageTaches.vue:

<script setup>
import { useTachesStore } from 'stores/store-taches'

const store = useTachesStore()

//...
</script>

Notre store pinia taches est maintenant visible dans Vue DevTools, uniquement dans la page Hello, même s'il est encore vide:

Ajout des tâches au magasin

Copier le tableau des tâches de la page PageTaches.vue dans le state du magasin store-taches.js :

src/store/store-taches.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTachesStore = defineStore('taches', () => {
  const taches = ref([
    {
      id: 1,
      nom: 'Acheter des oranges',
      terminee: false,
      dateFin: '06.06.2020',
      heureFin: '12:00'
    },
    {
      id: 2,
      nom: 'Manger des oranges',
      terminee: false,
      dateFin: '15.06.2020',
      heureFin: '22:00'
    },
    {
      id: 3,
      nom: 'Digérer des oranges',
      terminee: false,
      dateFin: '16.06.2020',
      heureFin: '14:00'
    }
  ])

  return {
    taches
  }
})

Pour voir les modification dans Vue DevTools :

1. Sauvegarder les modifications

2. Recharger Vue DevTools en cliquant sur le bouton "Refresh"

3. Cliquer sur l'état du magasin "tâches"

Les tâches sont maintenant visibles dans le magasin.

Affichage des tâches dans le magasin Vuex

Afficher les tâches du magasin

Notre page PageTaches.vue affiche ses propres tâches et non celles du magasin.

Liaision du store

Première chose, nous allons supprimer la ref taches de notre page PageTaches.vue et replacer l'objet dans le template par store.taches.

Résultat

• PageTaches.vue

  • 56 : import du store

  • 5 : accès au store

PageTaches.vue

src/pages/PageTaches.vue

<template>
  <q-page padding>
    <q-list separator bordered>
      <q-item
        v-for="tache in store.taches"
        :key="tache.id"
        @click="tache.terminee = !tache.terminee"
        clickable
        v-ripple
        :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
      >
        <q-item-section side>
          <q-checkbox v-model="tache.terminee" />
        </q-item-section>

        <q-item-section>
          <q-item-label
          :class="{ 'text-barre': tache.terminee }"
          >{{ tache.nom }}</q-item-label>
        </q-item-section>

        <q-item-section side>
          <!-- Création d'une ligne Flex -->
          <div class="row">
            <!-- Création d'une colonne Flex -->
            <div class="column justify-center">
              <q-icon
                size="18px"
                name="event"
                class="q-mr-xs"
              />
            </div>
            <!-- Création d'une colonne Flex -->
            <div class="column">
              <q-item-label
                class="text-right"
                caption
              >
                {{ tache.dateFin }}
              </q-item-label>
              <q-item-label
                class="text-right"
                caption
              >
                <small>{{ tache.heureFin}}</small>
              </q-item-label>
            </div>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script setup>
import { useTachesStore } from 'stores/store-taches'

const store = useTachesStore()
</script>

<style>
  .text-barre {
    text-decoration: line-through;
  }
</style>

store-taches.js

Tests

Modifier le nom d'une tâche du magasin depuis Vue DevTools, et vous verrez que la modification sera automatiquement répercutée dans le getter taches et dans la la page PageTaches.vue .

Cependant, si vous terminez une tâche en cliquant dessus, vous obtiendrez une erreur dans la console, car un composant ne peut pas modifier directement une donnée d'un magasin.

Pou modifier une donnée du magasin, il faudra créer une mutation dans le magasin que le composant devra commiter via une action.

Mais avant de créer les mutations et actions, nous allons créer un composant Tache.vue qui regroupera le code d'une tâche.