Pinia - actions

Nos composants peuvent actuellement accéder à l'état, state, de notre magasin en passant par les accesseurs, getters.

Les accesseurs sont abstraits par pinia, et ressemblent a de simples propriétés.

Nous allons maintenant mettre en place un mécanisme permettant, à nos composants, de modifier l'état des données de note magasin Vuex.

Notre composant TaskComponent.vue permet de modifier la valeur de la propriété terminee d'une tâche à deux endroits :

• En cliquant sur la tâche <q-item @click="tache.terminee = !tache.terminee">

• En cliquant sur la case à cocher <q-checkbox v-model="tache.terminee">

Pour l'instant, notre composant remonte un évènement, et laisse le parent s'occuper de la mutation. Cependant, cela n'est pas très pratique, on peut le faire beaucoup plus facilement, grace à une action.

1. Le composant appelle une action

2. L'action modifie l'état, state, du magasin

3. L'état mets à jour le composant

La boucle Pinia

Actions

Création d'une action

Créer l'action suivante dans le magasin src/store/store-taches.js :

src/store/store-taches.js

export const useTachesStore = defineStore('taches', () => {
  // ...
  
  const modifierTache = () => {
    console.log('tâche modifiée')
  }
  
  return {
    taches,
    modifierTache
  }
});

Import du store dans TaskComponent.vue

N'oublions pas que pour intéragir avec un store, il faut toujours l'importer, puis executer son Hook. Vu que l'on utilise plus les emits, on peut enlever leur déclarations.

<script setup>
import { useTachesStore } from 'stores/store-taches'
const { tache } = defineProps({ tache: Object })

const store = useTachesStore()
</script>

Appel de l'action

Reste à appeler l'action, dans le template de TaskComponent.vue en remplaçant le code des actuels événements.

Lors du clic sur la tache <q-item>, on va simplement appeler notre action modifierTache .

src/components/Taches/Tache.vue

<q-item
  @click="store.modifierTache"
  clickable
  v-ripple
  :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
>

Pour l'élément <q-checkbox> nous ne pouvons plus utiliser v-model, car cette directive tente de modifier l'objet lié, ce qui est interdit. On va donc simplement utiliser :modelValue pour rendre la case à cocher réactive, et écouter l'évènement @update:modelValue. C'est ce qu'il se passe quand on utilise v-model, mais ici on peut définir deux liens différents selon si la variable est modifiée dans le parent ou l'enfant.

src/components/Taches/Tache.vue

<q-checkbox
    :modelValue="tache.terminee" 
    @update:modelValue="store.modifierTache"
/>

OK ! Maintenant, lorsqu'on clique sur une tâche, un log apparaît dans la console, Tâche modifiée.

Super l'action fonctionne ! Mais ce qu'on veut c'est modifier la tâche.

On y est presque! Il nous manque juste une chose... La modification de l'état!

Modification de la tâche

Pour modifier la tâche nous devons un peu modifier notre action :

1. Récupérer la tâche à supprimer

2. Lui inverser sa valeur terminee

src/store/store-taches.js

const modifierTache = (id) => {
  const index = taches.value.findIndex((tache) => tache.id === id)
  taches.value[index].terminee = !taches.value[index].terminee
}

Et voilà! Ce n'est pas plus compliqué que ça! Il ne reste plus qu'a adapter notre code du template de TaskComponent.vue:

<template>
  <q-item
      @click="() => store.modifierTache(tache.id)"
      clickable
      v-ripple
      :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
    >
      <q-item-section side>
        <q-checkbox
          :modelValue="tache.terminee"
          @update:modelValue="() => store.modifierTache(tache.id)"
        />
      </q-item-section>
      <!-- ... -->
  </q-item>
</template>

Résultat

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'
    }
  ])

  const modifierTache = (id) => {
    const index = taches.value.findIndex((tache) => tache.id === id)
    taches.value[index].terminee = !taches.value[index].terminee
  }

  return {
    taches,
    modifierTache
  }
})

TaskComponent.vue