ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 142
Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 117
Abonament PDF

Noutăți Vue.js 3 - Composition API și Pinia

Ovidiu Mățan
Fondator @ Today Software Magazine



PROGRAMARE


Mulți dintre noi ne-am obișnuit cu modul în care este scris codul în Vue sau în alte frameworkuri care îl extind precum Nuxt.js. Modul în care ne declarăm proprietățile și metodele în componentele vue impune câteva limitări și condiții de declarare. În acest articol ne vom uita la Composition API și la noul framework de management al stărilor (store): Pinia.

Composition API + < script setup >

Recunoașteți în exemplul de mai jos o aplicație Vue. Se observă declararea proprietăților în metoda data() precum și a funcției increase în methods.

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count++;
    }
  }
}
</script>

<template>
  <p>
    <button @click=”increase”>click
    </button>
  </p>

  <p>{{ count }}</p>
</template>

Composition API + < script setup > ne propune o alternativă mai naturală dar impune câteva limitări legate de modul în care declarăm și folosim valorile proprietăților. Mai jos, este exemplul de mai sus rescris folosind noua paradigmă:

<script setup>
import { ref } from „vue”;

const count = ref(0);

function increase() {
  count.value++;
}
</script>

<template>
  <p>
    <button @click=”increase”>click
    </button>
  </p>
  <p>{{ count }}</p>
</template>

Codul html din secțiunea template rămâne neschimbat, în schimb partea de script diferă destul de mult. Constanta count și metoda increase() sunt definite fără a mai folosi suportul oferit de data() și methods:. A se remarca modul în care atribuim o valoare folosind ref(0) dar și incrementarea acesteia prin proprietatea .value.

Pentru a păstra proprietățile react ale datelor noastre, le vom declara în felul următor:

const data = reactive({
  check: "abracadabra",
  info: [],//array of consecutive numbers
});

iar proprietățile computed astfel:

const totalSum = computed(() => {
  let total = 0;
  data.info.map((value) => (total += value));
  return total;
});

Codul complet pentru demo se poate vedea mai jos. A se remarca modul simplu de afișare a datelor:

<script setup>
import { computed, reactive, ref } from „vue”;

const data = reactive({
  check: „abracadabra”,
  info: [],
});
const count = ref(0);

function increase() {
  count.value++;
  data.info.push(count.value);
}

const totalSum = computed(() => {
  let total = 0;
  data.info.map((value) => (total += value));
  return total;
});
</script>

<template>
  <h1>Hello World!{{ data.check }}</h1>
  <p>count is: {{ count }}</p>
  <p><button @click=”increase”>click</button></p>
  <span v-for=”info in data.info” :key=”info”>{{ info }} &nbsp;</span>
  <p>Total sum:{{ totalSum }}</p>
</template>

În interiorul tagului < template > nu mai este nevoie să folosim proprietatea .value, reconstrucția valorilor se realizează automat de către frameworkul Vue.

Concluzie

Composition API este acum parte din Vue3, reprezentând un mod mai elegant pentru definirea funcționalității componentelor. Trebuie doar să rețineți folosirea metodelor ref() pentru valori simple și reactive() pentru cele compuse.

Pinia, alternativa la Vuex

Reprezintă noul store care vine ca o alternativă la Vuex. Este asemănător cu acesta și păstrează aceeași filozofie de declarare a stărilor, getters și a acțiunilor, dar simplifică modul de declarare și de folosire a acestora.

Integrăm Pinia în proiectul nostru. Realizăm acest lucru prin modificarea src/main.js a aplicației demo. Va trebui să adăugăm frameworkul înainte de mountul aplicației.

Codul inițial:

import { createApp } from 'vue'  
import App from './App.vue'

createApp(App).mount('#app')

Va fi transformat astfel:

import { createApp } from 'vue'  
import App from './App.vue'  
import {createPinia} from "pinia";

const app = createApp(App);  
const pinia = createPinia()  
app.use(pinia).mount('#app')

Definim o variantă simplă de store care va conține counterul din exemplul precedent.

import { defineStore } from 'pinia'

export const counter=defineStore('count',{
    state:()=>{
        return {
            count_index: 0
        }
    }
})

iar integrarea sa se va realiza în acest fel:

import {counter} from "./store/counter";  
const storeCount = counter();

Spre deosebire de Vuex, în Pinia putem modifica direct starea (state) a store-ului nostru.

function increase() {  
  storeCount.count_index++;
....

Putem chiar să îl resetăm, dacă este nevoie:

if (storeCount.count_index===3){  
  storeCount.$reset();  
}

Afișarea valorilor din store se realizează direct:

<p>count is: {{ storeCount.count_index }}</p>

Putem să definim proprietăți computed care să folosească store-ul:

const triple=computed(()=>(storeCount.count_index*3))

Monitorizăm schimbările din store cu ajutorul metodei wotch:

watch(storeCount,(state)=>{  
  console.log("we got a change:",state, state.count_index)  
})

Getters

Vom folosi ca exemplu o proprietate care ne returnează valoarea negativă a counterului și o afișăm în ui.

//counter.js

getters:{  
  negative:(state)=>(-1*state.count_index),  
},

...

//app.vue
<p>Negative:{{storeCount.negative}}</p>

Dacă este nevoie, putem să transmitem și parametrii unei metode getter în felul următor:

//counter.js

getters:{  
...  
  multiply:(state)=>(factor)=>(state.count_index*factor)  
},

...
//app.vue

<p>Multiply:{{storeCount.multiply(4)}}</p>

Acțiuni

Acțiunile din store-ul Pinia sunt declarate ca funcții normale. Starea store-ului poate fi accesată prin intermediul this și remarcăm faptul că nu este necesară referința la state. Folosirea acestora în componentele Vue se rezumă la apelarea metodei corespunzătoare prin intermediul instanței store-ului.

//counter.js
actions:{
    increment(){
        this.count_index++;
    },
    add(value){
        this.count_index+=value;
    }
}
...
//app.vue
storeCount.increment();
storeCount.add(1);

Concluzie

Composition API, folosirea < script setup > și noul store Pinia simplifică codul nostru așa cum a fost arătat în exemplele din acest articol. Putem acum scrie cod mai eficient și simplu. Mă bucur de faptul că putem scrie cod în Vue fără a mai avea codul suplimentar legat de asocierile proprietăților sau de apelul acțiunilor. Personal, am să rescriu o parte din proiectele mele folosind noile paradigme și probabil am să fac o migrare de la Nuxt.js la Vue 3 + Pinia.

Conferință

NUMĂRUL 142 - Robotics & AI

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • Yardi
  • P3 group
  • Ing Hubs
  • Colors in projects

INTERVIURI VIDEO