MoonDocs

# Zarządzanie stanem

Każdy komponent w Vue zarządza własnym reaktywnym stanem, ale w większych projektach konieczne jest utworzenie stanu, który jest współdzielony przez wiele komponentów. W Vue 3 można zrobić to na kilka sposobów:

TIP

Przeczytaj więcej na temat State Management w oficjalnej dokumentacji (opens new window)

# Pinia

W projektach bazowych używana jest biblioteka Pinia. Każdy moduł posiada katalog stores gdzie można tworzyć nieskończoną ilość store w zależności od potrzeb projektowych.

# Definicja store'a

Store definiuje się za pomocą defineStore(). Funkcja ta przyjmuje jako pierwszy argument unikalną nazwę store'a. Koncepcja w przypadku projektów bazowych jest następująca {module}/{model}. Poniżej przykład w module Core:

modules/core/stores/core.js

import { defineStore } from "pinia";

export const usePermissionStore = defineStore("core/permission", {
  state: () => ({
    permissions: {
      ModuleStructure: null,
    },
  }),
  actions: {
    async fetchPermissions() {
      const { data } = await this.$api.get("/core/permissions");

      this.permissions = data;

      return data;
    },
  },
});

A potem można używać go w komponencie w następujący sposób:

<script setup>
  import { usePermissionStore } from "modules/core/stores/core"

  const permissionStore = usePermissionStore();

  onMounted(() => {
    if (!permissionStore.permissions.ModuleStructure) {
      permissionStore.fetchPermissions();
    }
  });

  const structure = computed(() => permissionStore.permissions.ModuleStructure);
</script>

# Pluginy

W bibliotece Pinia jest możliwość definiowania pluginów (opens new window). W projektach bazowych pluginy zdefiniowane są w pliku src/stores/plugins.js:

  • useApi - umożliwia używanie instancji axiosa w store'ach. W przypadku bardziej skomplikowanych aplikacji możliwe jest zdefiniowanie kilku instancji i przekazanie ich w tym pluginie.

  • useRouter - plugin daje możliwość użycia instancji vue-router'a (opens new window) bezpośrednio w store'ach.

  • useLoading - ułatwia korzystanie z pluginu Loading (opens new window) w store'ach.

TIP

Czytaj więcej na temat pluginów w bibliotece Pinia.js (Źródło (opens new window))

← Media →