Ananas/Vache

Pinia/Vuex ainsi que Redux sont conçus pour être une « source unique de vérité » dans laquelle vous pouvez disposer d'un ou plusieurs magasins pour contenir des données d'application pouvant être obtenues de n'importe où.

La boutique Pinia ressemble à ceci :

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

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

    return {data, getList};
});

peut alors être utilisé comme :

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

Nous pouvons créer plusieurs magasins :

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

Les magasins peuvent se référencer les uns les autres :

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

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

//Et cetera

Enfin, Pinia/Vuex sont des outils qui offrent la possibilité de récupérer et de manipuler des données stockées dans l'état.

Manager/Classe de service

Mais il existe une autre approche plus mature : les cours manager/service.

L'exemple précédent peut être réécrit comme :

//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);

Tout cela peut être facilement saisi dans TypeScript sans avoir besoin de wrappers supplémentaires, ref() etc.

Discuter

D'après ce que je peux dire, Pinia ressemble à « réinventer la roue » : écrire la même fonctionnalité de manière maladroite.

De plus, il ne fournit pas d'injection de dépendances : vous ne pouvez pas initialiser les magasins dans la configuration et injecter exactement un magasin dans un autre, vous devez passer useProductsStore() et ainsi de suite.

L'héritage ou tout autre élément POO n'est pas non plus possible.

Pinia favorise même les dépendances circulaires, ce qui entraîne un code spaghetti avec une mauvaise maintenabilité

Alors, après tout, pourquoi préférer Pinia/Vuex à l'approche POO propre et éprouvée avec des classes de manager ? J'ai passé des dizaines d'heures à écrire un projet de didacticiel de ma propre invention en utilisant Pinia comme "prochaine gestion d'état Vue recommandée", et maintenant je suis tenté de tout réécrire dans des classes de gestionnaire parce que je trouve Pinia maladroit et riche. Je viens de me rappeler qu'il y a quelques années, j'écrivais un autre projet de test - en utilisant Vue2 - et à cette époque j'utilisais la classe manager - et tout s'est bien passé. Ai-je oublié quelque chose ? Y aura-t-il un problème si j'abandonne Pinia ?