You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/it/data-flow.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Flusso dei Dati
2
2
3
-
Costruiamo un semplice contatore tramite Vuex per avere una visione migliore su come i dati siano scambiati tra i vari componenti. Si noti che questo esempio è unestremizzazione per spiegare alcuni concetti chiavi, Vuex non è utile per questo tipo di applicazioni molto semplici.
3
+
Costruiamo un semplice contatore tramite Vuex per avere una visione migliore su come i dati siano scambiati tra i vari componenti. Si noti che questo esempio è un'estremizzazione per spiegare alcuni concetti chiavi, Vuex non è utile per questo tipo di applicazioni molto semplici.
Copy file name to clipboardExpand all lines: docs/it/forms.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ Quando si utilizza Vuex in modalità strict, può risultare difficile utilizzare
8
8
9
9
Presupponendo che `obj` sia una proprietà derivata che restituisce un oggetto dallo store, avremmo una situazione dove `v-model` cerca di mutare direttamente `obj.message` quando l'utente modifica l'input. In modalità strict questo solleverebbe un errore a causa di una mutazione non avvenuta internamente ad una mutation di Vuex.
10
10
11
-
Un modo per risolvere questo conflitto in Vuex è quello di legare l`<input>` ad una chiamata che si riferisce ad un'azione. L'input si lega tramite `input` oppure l'evento `change`:
11
+
Un modo per risolvere questo conflitto in Vuex è quello di legare l'`<input>` ad una chiamata che si riferisce ad un'azione. L'input si lega tramite `input` oppure l'evento `change`:
12
12
13
13
```html
14
14
<input:value="message"@input="updateMessage">
@@ -38,4 +38,4 @@ mutations: {
38
38
}
39
39
```
40
40
41
-
Questo approccio rendere l'utilizzo di `v-model` leggermente più complesso ma è un trade-off necessario per rendere il vincolo tra l'input e lo stato tracciabile. Detto questo è giusto ricordare che Vuex non obbliga l'inserimento di tutti gli stati dentro ad uno store, se avete bisogno di tracciare degli stati che sono specifici di un solo componente è possibile farlo benissimo fuori dallo store di Vuex.
41
+
Questo approccio rende l'utilizzo di `v-model` leggermente più complesso ma è un trade-off necessario per rendere il vincolo tra l'input e lo stato tracciabile. Detto questo è giusto ricordare che Vuex non obbliga l'inserimento di tutti gli stati dentro ad uno store, se avete bisogno di tracciare degli stati che sono specifici di un solo componente è possibile farlo benissimo fuori dallo store di Vuex.
Copy file name to clipboardExpand all lines: docs/it/getting-started.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ Al centro di qualsiasi applicazione che utilizza Vuex si trova lo **store**. Uno
8
8
9
9
### Lo Store più Semplice
10
10
11
-
> **NOTA:** Nel cosrso della guida utilizzeremo la sintassi JavaScript che si riferisce a `ES2015` se ancora non siete al corrente degli aggiornamenti [aggiornatevi al riguardo](https://babeljs.io/docs/learn-es2015/)!
11
+
> **NOTA:** Nel corso della guida utilizzeremo la sintassi JavaScript che si riferisce a `ES2015` se ancora non siete al corrente degli aggiornamenti [aggiornatevi al riguardo](https://babeljs.io/docs/learn-es2015/)!
12
12
Questa documentazione, insoltre, assume che voi siate al corrente con i concetti discussi nel capitolo: [Costruire un'Applicazione scalabile](http://it.vuejs.org/guide/application.html).
13
13
14
14
Creare uno Store in Vuex è un processo abbastanza semplice, si inizia con lo stato iniziale e qualche mutations:
@@ -32,7 +32,7 @@ const store = new Vuex.Store({
32
32
})
33
33
```
34
34
35
-
Ora potrete accedere alloggetto stato tramite `store.state` ed eventualmente attivare mutazioni, per esempio sul nome:
35
+
Ora potrete accedere all'oggetto stato tramite `store.state` ed eventualmente attivare mutazioni, per esempio sul nome:
36
36
37
37
```js
38
38
store.dispatch('INCREMENT')
@@ -49,6 +49,6 @@ store.dispatch({
49
49
})
50
50
```
51
51
52
-
Di nuovo, il motivo per il quale stiamo effettuando il dispatch invece di cambiare lo stato tramite `store.state.count` è perchè vogliamo esplicitamente tenere traccia del cambiamento in se. Questa semplice convenzione rende le nostre intenzioni più esplicite, aiutando anche a capire perchè cambiamo lo stato in determinati punti del nostro codice. In aggiunta, questo ci permette di implementare strumenti per tenere traccia delle mutazioni, salvarne una copia o fare anche debuggin trasversale.
52
+
Di nuovo, il motivo per il quale stiamo effettuando il dispatch invece di cambiare lo stato tramite `store.state.count` è perchè vogliamo esplicitamente tenere traccia del cambiamento in se. Questa semplice convenzione rende le nostre intenzioni più esplicite, aiutando anche a capire perchè cambiamo lo stato in determinati punti del nostro codice. In aggiunta, questo ci permette di implementare strumenti per tenere traccia delle mutazioni, salvarne una copia o fare anche debugging trasversale.
53
53
54
-
Ovviamente questo è un esempio molto semplice di come funziona Vuex e la centralizzazione degli stati. Più avanti discuteremo di alcuni concetti in dettagli come: [Stati](state.md), [Mutazioni](mutations.md) ed [Azioni](actions.md).
54
+
Ovviamente questo è un esempio molto semplice di come funziona Vuex e la centralizzazione degli stati. Più avanti discuteremo di alcuni concetti in dettaglio come: [Stati](state.md), [Mutazioni](mutations.md) ed [Azioni](actions.md).
Dato che lo stato di Store in Vuex segue la filosofia "reattiva" di Vue, quando mutiamo uno stato, tutti i componenti che osservano tale stato riceveranno l'aggiornamento in modo automatico.
104
104
Questo significa che anche le mutation hanno bisogno di qualche precauzione:
105
105
106
-
1. E' preferibile inizializzare ogni stato allinterno dello store.
106
+
1. E' preferibile inizializzare ogni stato all'interno dello store.
107
107
108
108
2. Quando si aggiunge una proprietà ad un oggetto è consigliato:
109
109
@@ -142,7 +142,7 @@ const store = new Vuex.Store({
142
142
})
143
143
```
144
144
145
-
L'utilizzo delle costanti è altamente consigliato soprattutto quando si divide in più moduli un'applicazione di larga scala. Tutta via non c'è nessuna regola che vi obbliga ad utilizzare tale sintassi se non vi piace.
145
+
L'utilizzo delle costanti è altamente consigliato soprattutto quando si divide in più moduli un'applicazione di larga scala. Tuttavia non c'è nessuna regola che vi obbliga ad utilizzare tale sintassi se non vi piace.
146
146
147
147
### Le Mutation devono essere Sincrone
148
148
@@ -162,4 +162,4 @@ Ora immaginate di dover debuggare l'applicazione e guardate il log delle mutatio
162
162
163
163
### Sulle Azioni
164
164
165
-
Le mutazioni di stato combinate con eventi asincroni possono portare difficoltà nel capire che cosa succede in un determinato momento. Per sempio se chiamate due metodi, entrambi implementano internamente delle chiamate asincrone, come potete stabilire l'ordine di chiamata? Ecco perchè dev'essere chiaro il motivo per il quale qualsiasi tipo di operazione asincrona dev'essere fatto tramite le [Azioni](actions.md)
165
+
Le mutazioni di stato combinate con eventi asincroni possono portare difficoltà nel capire che cosa succede in un determinato momento. Per esempio se chiamate due metodi, entrambi implementano internamente delle chiamate asincrone, come potete stabilire l'ordine di chiamata? Ecco perchè dev'essere chiaro il motivo per il quale qualsiasi tipo di operazione asincrona dev'essere fatto tramite le [Azioni](actions.md)
Copy file name to clipboardExpand all lines: docs/it/state.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -100,7 +100,7 @@ computed: {
100
100
}
101
101
```
102
102
103
-
### I Getter posso restituire Stati Derivati
103
+
### I Getter possono restituire Stati Derivati
104
104
105
105
Se consideriamo che i getter di Vuex dietro le quinte sono delle proprietà derivate, allora possiamo intuire che è possibile sfruttare alcune proprietà di quest'ultime per restituire uno stato più eleborato.
106
106
Per esempio, si consideri che lo stato ha un array di `messaggi` contenente tutti i messaggi, ed un `currentThreadID` che rappresenta il thread corrente visualizzato dall utente.
Copy file name to clipboardExpand all lines: docs/it/strict.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ Quando si è in modalità strict, ogni volta che Vuex viene mutato al di fuori d
13
13
14
14
### Sviluppo vs Produzione
15
15
16
-
**Non abilutate la modalità strict quando pubblicate il progetto in produzione** La modalità strict esegue una scansione approfondita di ogni mutation per capire i cambiamenti effettuati sugli stati dello store - in produzione questo portrebbe a dei problemi di prestazioni.
16
+
**Non abilitate la modalità strict quando pubblicate il progetto in produzione** La modalità strict esegue una scansione approfondita di ogni mutation per capire i cambiamenti effettuati sugli stati dello store - in produzione questo porterebbe a dei problemi di prestazioni.
17
17
18
18
Come sui middleware anche qui possiamo automatizzare il processo di abilitazione/disabilitazione tramite gli strumenti di build:
Copy file name to clipboardExpand all lines: docs/it/testing.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -47,7 +47,7 @@ describe('mutations', () => {
47
47
48
48
### Testare le Action
49
49
50
-
Le Action possono essere più complesse da testate dato che possono contenere chiamate ad API esterne a Vuex. Quando si testano le action, si dovrà fare uso, nella maggior parte dei casi, di un sistema di mocking - per esempio nel caso volessimo chiamare delle API ad un servizio di terze parti
50
+
Le Action possono essere più complesse da testate dato che possono contenere chiamate ad API esterne a Vuex. Quando si testano le action, si dovrà fare uso, nella maggior parte dei casi, di un sistema di mocking - per esempio nel caso volessimo chiamare delle API ad un servizio di terze parti.
51
51
Per effettuare il mocking delle dipendenze, si può utilizzare il comodo sistema di [inject-loader](https://github.com/plasticine/inject-loader) assieme a WebPack.
52
52
53
53
Esempio su una Action asincrona:
@@ -156,7 +156,7 @@ mocha test-bundle.js
156
156
#### Testare nel Browser
157
157
158
158
1. Installare `mocha-loader`
159
-
2. Cambiare l`entry` dalla configurazione Webpack sopra citata in `'mocha!babel!./test.js'`.
159
+
2. Cambiare l'`entry` dalla configurazione Webpack sopra citata in `'mocha!babel!./test.js'`.
160
160
3. Inizializzare `webpack-dev-server` utilizzando la configurazione sopra citata
161
161
4. Andare su `localhost:8080/webpack-dev-server/test-bundle`.
0 commit comments