Pinia - Ten lepszy store we vue

1. Co to jest Pinia?

Pinia to nowoczesna biblioteka do zarządzania stanem w aplikacjach Vue.js. Jest ona oficjalnym następcą Vuex, oferującym lżejsze i bardziej elastyczne podejście do zarządzania stanem. Zaprojektowana z myślą o prostocie i wydajności, Pinia umożliwia łatwą integrację z Vue, zapewniając przy tym intuicyjny i deklaratywny sposób definiowania i zarządzania stanem aplikacji.

2. Czemu Pinia jest lepsza od Vuex?

Pinia oferuje kilka kluczowych zalet w porównaniu do Vuex:

Lepsza czytelność kodu: Pinia używa prostszej struktury, co ułatwia zrozumienie i utrzymanie kodu.

Większa elastyczność: Pinia pozwala na definiowanie sklepów (store’ów) jako pojedynczych instancji, co ułatwia ich ponowne wykorzystanie i testowanie.

Lepsza integracja z TypeScript: Pinia jest zaprojektowana z myślą o TypeScript, co oznacza lepszą integrację i wsparcie typów. Lżejsza i szybsza: Dzięki prostszej architekturze, Pinia jest lżejsza i szybsza niż Vuex.

3. Jak dodać Pinie do projektu?

Aby dodać Pinia do projektu Vue, użyj polecenia instalacji pakietu

npm install pinia lub yarn add pinia

W głównym pliku aplikacji (np. main.js lub main.ts), zaimportuj Pinia i dodaj ją do instancji Vue:

VUE 3

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

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

VUE 2

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

4. Przykładowy store w Pinia

Tworzenie store’a w Pinia jest proste i intuicyjne. Oto przykład:

import { defineStore } from 'pinia';

export const useExampleStore = defineStore('example', {
  // Stan store'a
  state: () => ({
    counter: 0,
  }),

  // Metody do modyfikacji stanu
  actions: {
    increment() {
      this.counter++;
    },
  },
});

W tym przykładzie stworzyłam prosty store z jednym stanem counter i metodą increment do zwiększania wartości licznika. Store można następnie używać w komponentach Vue.

Dla przykładu ten sam kod we vuex

export default new Vuex.Store({
  state: {
    counter: 0,
  },
  mutations: {
    increment(state) {
      state.counter++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
});

5. Jak użyć store w pinia w komponencie

// Komponent Vue
<template>
  <button @click="increment">Increment</button>
  {{ counter }}
</template>

<script setup>
import { useCounterStore } from './store';
const store = useCounterStore();
</script>

Zakończenie

Pinia to potężne i elastyczne rozwiązanie do zarządzania stanem w aplikacjach Vue.js. Dzięki swojej prostocie i wydajności, stanowi świetną alternatywę dla Vuex i jest coraz bardziej popularna w społeczności Vue.