iivuex

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: (),
	}
}