Skip to content

Commit a918715

Browse files
committed
Add Portuguese Translation
Finalizando primeira versão da tradução. Falta uma revisão/melhorias nos exemplos Update docs/pt/SUMMARY.md Update docs/pt/intro.md Update docs/pt/getting-started.md Update docs/pt/getting-started.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/state.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/mutations.md Update docs/pt/actions.md Update docs/pt/actions.md Update docs/pt/actions.md Update docs/pt/actions.md Update docs/pt/actions.md Update docs/pt/structure.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/middlewares.md Update docs/pt/strict.md Update docs/pt/strict.md Update docs/pt/strict.md Update docs/pt/strict.md Update docs/pt/strict.md Update docs/pt/strict.md Update docs/pt/strict.md Update docs/pt/strict.md Update docs/pt/forms.md Update docs/pt/forms.md Update docs/pt/forms.md Update docs/pt/forms.md Update docs/pt/testing.md Update docs/pt/testing.md Update docs/pt/testing.md Update docs/pt/testing.md Update docs/pt/testing.md Update docs/pt/testing.md Update docs/pt/testing.md Update docs/pt/testing.md Update docs/pt/hot-reload.md Update docs/pt/hot-reload.md Update docs/pt/hot-reload.md Update docs/pt/hot-reload.md Update docs/pt/hot-reload.md Update docs/pt/api.md Update docs/pt/api.md Update docs/pt/api.md Update docs/pt/api.md Update docs/pt/api.md Revisão da tradução realizada!
1 parent 9071ec3 commit a918715

21 files changed

+1456
-0
lines changed

docs/LANGS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
* [English](en/)
22
* [简体中文 (outdated)](zh-cn/)
33
* [日本語 (outdated)](ja/)
4+
* [Português](pt/)

docs/pt/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SUMMARY.md

docs/pt/SUMMARY.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Índice
2+
3+
> Tenha certeza de ler a documentação na ordem a seguir.
4+
5+
- [O que é o Vuex?](intro.md)
6+
- [Primeiros Passos](getting-started.md)
7+
- [Tutorial](tutorial.md)
8+
- Principais Conceitos
9+
- [Estado e Getters](state.md)
10+
- [Mutações](mutations.md)
11+
- [Ações](actions.md)
12+
- [Fluxo de Dados](data-flow.md)
13+
- [Estrutura da Aplicação](structure.md)
14+
- [Middlewares](middlewares.md)
15+
- [Strict Mode](strict.md)
16+
- [Manipulação de Formulários](forms.md)
17+
- [Testes](testing.md)
18+
- [Hot Reloading](hot-reload.md)
19+
- [Referência da API](api.md)

docs/pt/actions.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# Ações
2+
3+
> Ações no Vuex são na verdade "action creators" em definições puras do Flux, mas eu achei esse termo mais confuso do que útil.
4+
5+
Ações são apenas funções que disparam mutações. Por convenção, as ações Vuex sempre esperam uma instância de um armazem (store) como primeiro parâmetro, seguido por parâmetros adicionais, que são opcionais:
6+
7+
``` js
8+
// the simplest action
9+
function increment (store) {
10+
store.dispatch('INCREMENT')
11+
}
12+
13+
// a action with additional arguments
14+
// with ES2015 argument destructuring
15+
function incrementBy ({ dispatch }, amount) {
16+
dispatch('INCREMENT', amount)
17+
}
18+
```
19+
20+
Isso pode parecer bobo a primeira vista: por que nós simplesmente não disparamos mutações diretamente? Bem, você se lembra que **mutações devem ser síncronas**? Ações não. Nós podemos realizar operações **assíncronas** dentro de uma ação:
21+
22+
``` js
23+
function incrementAsync ({ dispatch }) {
24+
setTimeout(() => {
25+
dispatch('INCREMENT')
26+
}, 1000)
27+
}
28+
```
29+
30+
Um exemplo mais prático seria uma ação para realizar o checkout em um carrinho de compras, o que envolve **chamar uma API assíncrona** e **disparar múltiplas mutações**:
31+
32+
``` js
33+
function checkout ({ dispatch, state }, products) {
34+
// save the current in cart items
35+
const savedCartItems = [...state.cart.added]
36+
// send out checkout request, and optimistically
37+
// clear the cart
38+
dispatch(types.CHECKOUT_REQUEST)
39+
// the shop API accepts a success callback and a failure callback
40+
shop.buyProducts(
41+
products,
42+
// handle success
43+
() => dispatch(types.CHECKOUT_SUCCESS),
44+
// handle failure
45+
() => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
46+
)
47+
}
48+
```
49+
50+
Note que ao invés de esperar um retorno ou passar callback para ações, o resultado de chamar uma API assíncrona é lidado ao disparar novas mutações. A política de boa prática vizinhança aqui é que **o único efeito colateral gerado ao chamar ações deve ser disparar mutações**.
51+
52+
### Chamando Ações em Componentes
53+
54+
Você deve ter percebido que uma função de ação não pode ser chamada diretamente sem referenciar uma instância do armazém. Tecnicamente, nós podemos invocar uma ação utilizando `action(this.$store)` dentro de um método, mas é melhor se nós pudermos expor versões de ações diretamente "ligadas" aos métodos dos componentes, e assim nós poderíamos facilmente referenciá-las dentro de templates. Nós podemos fazer isso utilizando a opção `vuex.actions`:
55+
56+
``` js
57+
// inside a component
58+
import { incrementBy } from './actions'
59+
60+
const vm = new Vue({
61+
vuex: {
62+
getters: { ... }, // state getters
63+
actions: {
64+
incrementBy // ES6 object literal shorthand, bind using the same name
65+
}
66+
}
67+
})
68+
```
69+
70+
O que o código acima faz é vincular a ação `incrementBy` a instância local do armazém do componente, e expô-lo no componente como se fosse um método da instância, acessado via `vm.incrementBy`. Qualquer argumento passado para o método `vm.incrementBy` será passado para a ação que importamos depois do primeiro argumento, que é nosso armazém. Então, ao chamar:
71+
72+
``` js
73+
vm.incrementBy(1)
74+
```
75+
76+
é o mesmo que:
77+
78+
``` js
79+
incrementBy(vm.$store, 1)
80+
```
81+
82+
Mas o benefício é que nós podemos vincular essa ação ao template do componente e utilizá-lo mais facilmente:
83+
84+
``` html
85+
<button v-on:click="incrementBy(1)">increment by one</button>
86+
```
87+
88+
E você pode usar um nome diferente ao método ao vincular uma ação:
89+
90+
``` js
91+
// inside a component
92+
import { incrementBy } from './actions'
93+
94+
const vm = new Vue({
95+
vuex: {
96+
getters: { ... },
97+
actions: {
98+
plus: incrementBy // bind using a different name
99+
}
100+
}
101+
})
102+
```
103+
104+
Agora a ação será conectada como `vm.plus` ao invés de `vm.incrementBy`.
105+
106+
### Ações Inline
107+
108+
Se uma ação é específica à um componente, você pode utilizar um atalho e definí-la diretamente no componente:
109+
110+
``` js
111+
const vm = new Vue({
112+
vuex: {
113+
getters: { ... },
114+
actions: {
115+
plus: ({ dispatch }) => dispatch('INCREMENT')
116+
}
117+
}
118+
})
119+
```
120+
121+
### Vinculando todas Ações
122+
123+
Se você quiser vincular todas as ações compartilhadas:
124+
125+
``` js
126+
import * as actions from './actions'
127+
128+
const vm = new Vue({
129+
vuex: {
130+
getters: { ... },
131+
actions // bind all actions
132+
}
133+
})
134+
```

docs/pt/api.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Referência da API
2+
3+
### Vuex.Store
4+
5+
``` js
6+
import Vuex from 'vuex'
7+
8+
const store = new Vuex.Store({ ...options })
9+
```
10+
11+
### Opções do Construtor Vuex.Store
12+
13+
- **state**
14+
15+
- tipo: `Objeto`
16+
17+
O objeto de estado raíz para o armazém Vuex.
18+
19+
[Detalhes](state.md)
20+
21+
- **mutations**
22+
23+
- tipo: `Objeto`
24+
25+
Um objeto onde cada entrada é o nome de uma mutação e o valor é uma função, que é o handler. A função handler sempre recebe o `state` (estado) como primeiro parâmetro, e recebe todos os outros parâmetros passados para a chamada da mutação após esse.
26+
27+
[Detalhes](mutations.md)
28+
29+
- **modules**
30+
31+
- tipo: `Objeto`
32+
33+
Um objeto que contém submódulos para serem combinados dentro do armazém, no seguinte formato:
34+
35+
``` js
36+
{
37+
key: {
38+
state,
39+
mutations
40+
},
41+
...
42+
}
43+
```
44+
45+
Cada módulo pode conter `state` (estado) e `mutations` (mutações) assim como as opções da raíz do Vuex. O estado do módulo será combinado com o estado do armazém principal do Vuex utilizando a opção "modules". As mutações de um módulo somente receberão o estado daquele módulo como primeiro parâmetros, ao invés de todo o estado do armazém.
46+
47+
- **middlewares**
48+
49+
- tipo: `Array<Objeto>`
50+
51+
Um array de objetos de middleware que estão no seguinte formato:
52+
53+
``` js
54+
{
55+
snapshot: Boolean, // padrão: false
56+
onInit: Function,
57+
onMutation: Function
58+
}
59+
```
60+
61+
Todos os campos são opcionais. [Detalhes](middlewares.md)
62+
63+
- **strict**
64+
65+
- tipo: `Boolean`
66+
- padrão: `false`
67+
68+
Força o armazém do Vuex a se comportar com o modo strict. Quando esse módulo está ativado qualquer mutação ao Vuex que são realizadas fora dos handlers das mutações irão disparar um erro.
69+
70+
[Detalhes](strict.md)
71+
72+
### Propriedades da Instância Vuex.Store
73+
74+
- **state**
75+
76+
- tipo: `Objeto`
77+
78+
O estado raíz. Somente leitura.
79+
80+
### Métodos da Instância Vuex.Store
81+
82+
- **dispatch(mutationName: String, ...args)**
83+
84+
Dispara diretamente uma mutação. Isso é útil em algumas situações, mas geralmente você ira preferir utilizar as ações no seu código.
85+
86+
- **watch(pathOrGetter: String|Function, cb: Function, [options: Object])**
87+
88+
Observa um caminho ou o valor de uma função getter, e chama o callback quando o valor é modificado. Aceita opções não obrigatórias idênticas ao do método `vm.$watch` do Vue.
89+
90+
Para finalizar a observação, chame a função de retorno.
91+
92+
- **hotUpdate(newOptions: Object)**
93+
94+
Atualização em tempo real de ações e mutações. [Detalhes](hot-reload.md)

docs/pt/book.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../book.json

docs/pt/data-flow.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# Fluxo de Dados
2+
3+
Vamos construir um simples contador com Vuex para entender um pouco melhor o fluxo de dados dentro de aplicações Vuex. Note que esse é um exemplo trivial somente com o objetivo de explicar os conceitos - na prática você não precisa do Vuex para um app tão simples.
4+
5+
### O Armazém
6+
7+
``` js
8+
// store.js
9+
import Vue from 'vue'
10+
import Vuex from 'vuex'
11+
12+
Vue.use(Vuex)
13+
14+
// estado inicial do app
15+
const state = {
16+
count: 0
17+
}
18+
19+
// definindo as possíveis mutações
20+
const mutations = {
21+
INCREMENT (state) {
22+
state.count++
23+
},
24+
DECREMENT (state) {
25+
state.count--
26+
}
27+
}
28+
29+
// criando o armazém
30+
export default new Vuex.Store({
31+
state,
32+
mutations
33+
})
34+
```
35+
36+
### Ações
37+
38+
``` js
39+
// actions.js
40+
export const increment = ({ dispatch }) => dispatch('INCREMENT')
41+
export const decrement = ({ dispatch }) => dispatch('DECREMENT')
42+
```
43+
44+
### Utilizando-o com o Vue
45+
46+
**Template**
47+
48+
``` html
49+
<div id="app">
50+
Clicked: {{ count }} times
51+
<button v-on:click="increment">+</button>
52+
<button v-on:click="decrement">-</button>
53+
</div>
54+
```
55+
56+
**Script**
57+
58+
``` js
59+
// Nós estamos importando e injetando o armazém aqui porque
60+
// essa é nossa instância raiz. Em aplicações maiores você só precisa fazer isso uma vez.
61+
import store from './store'
62+
import { increment, decrement } from './actions'
63+
64+
const app = new Vue({
65+
el: '#app',
66+
store,
67+
vuex: {
68+
getters: {
69+
count: state => state.count
70+
},
71+
actions: {
72+
increment,
73+
decrement
74+
}
75+
}
76+
})
77+
```
78+
79+
Aqui você irá notar que o componente é extremamente simples: Ele exibe um estado do armazém Vuex (nem mesmo tem seus próprios dados), e chama algumas ações do armazém quando o usuário dispara um evento.
80+
81+
Você também irá perceber que o fluxo de dados é unidirecional, como deveria ser no Flux:
82+
83+
1. O input do usuário no componente dispara uma chamada para uma ação;
84+
2. As Ações disparam mutações que modificam o estado;
85+
3. As alterações no estado são refletidas no componente via getters.
86+
87+
<p align="center">
88+
<img width="700px" src="vuex.png">
89+
</p>

docs/pt/forms.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Manipulação de Formulários
2+
3+
Ao utilizar o modo strict do Vuex, é um pouquinho diferente o uso do `v-model`, já que o estado pertence ao Vuex:
4+
5+
``` html
6+
<input v-model="obj.message">
7+
```
8+
9+
Assumindo que `obj` é uma computed property que retorna um Objeto do armazém, o `v-model` aqui irá tentar modificar o valor do `obj.message` diretamente quando o usuário digitar algo. Com o modo strict, isso vai resultar em um erro, porque a mutação não é realizada dentro de uma mutação explícita do Vuex.
10+
11+
A maneira "Vuex" de lidar com os formulários é vincular o valor do `<input>`' e chamar uma ação nos eventos `input` ou `change`:
12+
13+
``` html
14+
<input :value="message" @input="updateMessage">
15+
```
16+
``` js
17+
// ...
18+
vuex: {
19+
getters: {
20+
message: state => state.obj.message
21+
},
22+
actions: {
23+
updateMessage: ({ dispatch }, e) => {
24+
dispatch('UPDATE_MESSAGE', e.target.value)
25+
}
26+
}
27+
}
28+
```
29+
30+
E aqui é o handler da mutação:
31+
32+
``` js
33+
// ...
34+
mutations: {
35+
UPDATE_MESSAGE (state, message) {
36+
state.obj.message = message
37+
}
38+
}
39+
```
40+
41+
Sim, isso é bem mais extenso do que simplesmente utilizar um `v-model`, mas esse é o custo de fazer com que as modificações do estado sejam explícitas e rastreáveis. Ao mesmo tempo, note que o Vuex não demanda que você adicione todo o estado no armazém - se você não quiser rastrear mas mutações para as interações de formulário, você pode simplesmente manter o estado do formulário fora do Vuex como o estado local do componente, o que lhe permite utilizar livremente o `v-model`.

0 commit comments

Comments
 (0)