iivuex

    0.1.4 • Public • Published

    Setup

    Install npm

    npm vuex-util
    

    quick configuration

    main.js

    import Vue from 'vue'
    import iivuex from 'vuex-utils'
    import { createHttp } from 'vuex-utils/plugins/http'
    import store from './store'
    import router from './router'
    import App from './App.vue'
     
    Vue.use(iivuex, {store: store, http: createHttp(), router: router});
     
    new Vue({
        store,
        router,
        render: h => h(App)
    }).$mount('#app');

    BIND

    Ma le "map" esistono già in VUEX

    Si, e sono fantastiche.
    Ma il mapBinding permette di applicare un bind two way
    e molto altro ancora.

    Caratteristiche

    • sono definiti con una semplice STRINGA
    • permetto di tenere la VIEW senza codice

    mapBinding (computed)

    • collega una variabile "computed" allo store

    Esempio

    online

    App.vue

    <template>
        <div><p>{{v1}}</p><p>{{v22}}</p><p>{{v3}}</p></div>
    </template>
     
    <script>
    import { mapBinding } from "iivuex";
     
    export default {
       computed: {
         ...mapBinding({
                v1: "test/value",
                v22: "test/value2.prop2",
                v3: "<test/value3",
         })
       },
    };
    </script> 

    store.js

    test: {
        namespaced: true,
        state: {
            value: 0,
            value2: { prop1: "first", prop2: "second" },
        },
        getters: {
            value3: ( state ) => state.value3.toUpperCase(),
        },
        mutations: {
            value: (state, v) => state.value = v,
            value2: (state, v) => state.value2 = v,
        },
    };

    Ricorda: nella view NON CI DEVE ESSERE CODICE !
    Se mai dovesse accadere ti preghiamo di chiamarci immediatamente!!!

    [test]

    ADAPTER

    STORE prolisso e sparpagliato?
    Gli ADAPTER creano, nello STORE, un "entry point" conciso per i BIND

    Caratteristiche

    • Collegano le BIND allo STORE
    • Sono raggruppabili in PATTERN
    • Sono estendibili

    ArapterVarWritable

    • crea nello STORE delle variabili in lettura e scrittura

    Esempio

    online

    store.js

    // read/write
    const adapterVar = new AdapterVarWritable({
      value1: "paperino",
    });
    // read only
    const store = {
      state: {
        value2: "pippo",
      }
    };
    // create module
    const module_test = AdapterVarWritable.Merge([adapterVar, store]);

    Che equivale a:

    const module_test = {
        state: {
            value1: "paperino",
            value2: "pippo",
        },
        mutations: {
            value1: (store, v) {
                store.value1 = v; 
            },
        }
    }

    notare: non c'e' bidogno del flag namespaced

    In questa maniera:

    • Possiamo usare ADAPTER per uno specifico PATTERN
    • Se ci sono molte variabili risparmiamo e semplifichiamo la lettura del codice

    SERVICES

    Archiviano, spostano dati e li chiedono al server
    ... si occupano del lavoro sporco!

    Caratteristiche

    • comunicano solo con gli ADAPTER
    • si trasformano in MOCK
    • è possibile metterli in pipeline

    ServiceRestHTTP

    • fa richieste REST HTTP
    import { AdapterRest, ServiceRestHTTP } from 'iivuex'
     
    const adapterRest = new AdapterRest(new ServiceRestHTTP("user"));
    const module_user = AdapterRest.Merge([
        adapterRest,
        store
    ]);

    ServiceRestHTTP fa da REPOSITORY
    AdapterRest accede a questo REPOSITORY e crea una serie di "entry point" nello STORE
    utili per gestire un entity tramite REST HTTP

    Grazie a AdapterRest module_user avra' la seguente struttura:

    {
        state: {
            // La LIST-ITEMS recuperata con "getAll"
            all: Array,
            // Indica se il servizio HTTP è impegnato a recuperare dati (true) o no (false)
            fetchIsBusy:Boolean, 
            // L' attuale SELECTED-ITEM
            item:null,
            // indica se SELECTED-ITEM è cambiato (true) o no (false) dall'utlima volta che è stato memorizzato in "state.item"
            itemChanged:false,
            // il precedente valore di SELECTED-ITEM da quando è stato memorizzato in "state.item"
            itemReset:null,
        },
        mutation: {
            all: Array,
            fetchIsBusy:Boolean, 
            item:null,
            itemChanged:false,
            itemReset:null,
        },
        getters: {
            // la LIST-ITEMS PERO' filtrata (serve sempre :D)
            filtered: Array, 
            // Restituisce un ITEM grazie al suo id
            get:(id),
            // Restituisce l'indice della LIST-ITEMS di un ITEM grazie al suo id
            getIndex:(id),
            // restituisce se SELECTED-ITEM è nuovo (true) oppure è stato prelevato dal service (false)
            isNewItem:true,
        },
        actions: {
            // restituisce la LIST-ITEMS se valorizzata altrimenti la va a prendere nel REPOSITORY
            getAllOrFetch: async(params),
            // Preleva tutti gli ITEM dal REPOSITORY e li mette in LIST-ITEMS
            getAll: async(params), 
            // Preleva uno specifico item dal REPOSITORY e lo mette in SELECTED-ITEM
            get: async(params), 
            // Restituisce SELECTED-ITEM se c'e' altrimenti 
            // preleva dal REPOSITORY, memorizza e quindi lo restituisce
            getOrFetch: async(params), 
            // resetta il SELECTED-ITEM prendendo il valore da "state.itemReset"
            reset: (),
        }
    }

    Install

    npm i iivuex

    DownloadsWeekly Downloads

    5

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    2.05 MB

    Total Files

    9

    Last publish

    Collaborators

    • priolo