Ananas/Kuh

Pinia/Vuex sowie Redux sind als „Single Source of Truth“ konzipiert, in der Sie einen oder mehrere Stores haben können, in denen Anwendungsdaten gespeichert werden können, die von überall abgerufen werden können.

Der Pinia-Store sieht so aus:

export let useProductsStore = defineStore('products', () => {
    let data = ref(products);

    function getList (params) {
        return someSearchStuffForProducts(params);
    }

    return {data, getList};
});

kann dann verwendet werden als:

let productsStore = useProductsStore();
console.log(data, data.value);
productsStore.getList(params);

Wir können mehrere Geschäfte erstellen:

let usersStore     = useUsersStore();
let productsStore  = useProductsStore();
let basketStore    = useBasketStore();
let favoritesStore = useFavoritesStore();

Stores können aufeinander verweisen:

export let useUsersStore = defineStore('users', () => {
    let productsStore = useProductsStore();
}

export let useBasketsStore = defineStore('basket', () => {
    let productsStore = useProductsStore();
}

//Et cetera

Schließlich sind Pinia/Vuex Tools, die die Möglichkeit bieten, im Staat gespeicherte Daten abzurufen und zu bearbeiten.

Manager/Service-Klasse

Aber es gibt noch einen anderen ausgereiften Ansatz: Manager-/Service-Kurse.

Das vorherige Beispiel kann wie folgt umgeschrieben werden:

//Define the "single source of truth"
let store = {
    products:      { /* ... */},
    currentUser:   { /* ... */},
    userBasket:    { /* ... */},
    userFavorites: { /* ... */},
};

//Here goes manager classes
class ProductsManager {
    constructor (params) {
        this.state = params.state;
        //...
    }

    getList (params) {
        return someSearchStuffForProducts(params);
    }
}

class UsersManager {
    constructor (params) {
        this.state = params.state;
        //Products manager is injected as a dependency
        this.productsManager = params.productsManager;
        //...
    }
}

class BasketManager {
    constructor (params) {
        this.state = params.state;
        //Products manager is injected as a dependency
        this.productsManager = params.productsManager;
        //...
    }
}

//Some config/initialization script
export let DIC = {}; //Container for manager instances
DIC.productsManager = new ProductsManager({state: store.products});
DIC.usersManager = new usersManager({
    state:           store.currentUser,
    productsManager: DIC.productsManager,
});
DIC.basketManager = new BasketManager({
    state:           store.userBasket,
    productsManager: DIC.productsManager,
});

//Usage
import {DIC} from './config';
DIC.productsManager.getList();
DIC.basketManager.add(someProductId);
DIC.basketManager.changeCount(someProductId, 3);

All dies kann einfach in TypeScript eingegeben werden, ohne dass zusätzliche Wrapper usw. erforderlich sind. ref()

Diskutieren

Soweit ich das beurteilen kann, scheint Pinia „das Rad neu zu erfinden“: die gleiche Funktionalität auf ungeschickte Weise zu schreiben.

Außerdem bietet es keine Abhängigkeitsinjektion: Sie können die Stores in der Konfiguration nicht initialisieren und einen Store genau in einen anderen injizieren, Sie müssen

useProductsStore() übergeben und so weiter.

Vererbung oder andere OOP-Sachen sind ebenfalls nicht möglich.

Pinia fördert sogar zirkuläre Abhängigkeiten, was zu Spaghetti-Code mit schlechter Wartbarkeit führt

Warum sollte man also Pinia/Vuex dem bewährten Clean-OOP-Ansatz mit Managerklassen vorziehen? Ich habe Dutzende Stunden damit verbracht, ein Tutorial-Projekt meiner eigenen Erfindung zu schreiben und Pinia als „nächstes empfohlenes Vue-Zustandsmanagement“ zu verwenden, und jetzt bin ich versucht, alles in Manager-Klassen umzuschreiben, weil ich Pinia klobig und reichhaltig finde. Mir ist gerade eingefallen, dass ich vor ein paar Jahren ein weiteres Testprojekt geschrieben habe – mit Vue2 – und damals die Manager-Klasse verwendet habe – und alles verlief reibungslos. Habe ich etwas übersehen? Wird es ein Problem geben, wenn ich Pinia aufgebe?

const basketManagerStore = defineStore({
  state: () => ({ _getFoo: null }),
  getters: { 
    foo: state => state._getFoo()
  },
  actions: {
    setFoo(getFoo) {
      this._getFoo = getFoo;
    }
  }
});

basketManagerStore.setFoo(useSomeFooStore);