Skip to content

Commit

Permalink
Add Portuguese Translation
Browse files Browse the repository at this point in the history
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!
  • Loading branch information
vitorarjol committed Mar 28, 2016
1 parent 9071ec3 commit a918715
Show file tree
Hide file tree
Showing 21 changed files with 1,456 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/LANGS.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
* [English](en/)
* [简体中文 (outdated)](zh-cn/)
* [日本語 (outdated)](ja/)
* [Português](pt/)
1 change: 1 addition & 0 deletions docs/pt/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
SUMMARY.md
19 changes: 19 additions & 0 deletions docs/pt/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Índice

> Tenha certeza de ler a documentação na ordem a seguir.
- [O que é o Vuex?](intro.md)
- [Primeiros Passos](getting-started.md)
- [Tutorial](tutorial.md)
- Principais Conceitos
- [Estado e Getters](state.md)
- [Mutações](mutations.md)
- [Ações](actions.md)
- [Fluxo de Dados](data-flow.md)
- [Estrutura da Aplicação](structure.md)
- [Middlewares](middlewares.md)
- [Strict Mode](strict.md)
- [Manipulação de Formulários](forms.md)
- [Testes](testing.md)
- [Hot Reloading](hot-reload.md)
- [Referência da API](api.md)
134 changes: 134 additions & 0 deletions docs/pt/actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
# Ações

> 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.
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:

``` js
// the simplest action
function increment (store) {
store.dispatch('INCREMENT')
}

// a action with additional arguments
// with ES2015 argument destructuring
function incrementBy ({ dispatch }, amount) {
dispatch('INCREMENT', amount)
}
```

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:

``` js
function incrementAsync ({ dispatch }) {
setTimeout(() => {
dispatch('INCREMENT')
}, 1000)
}
```

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**:

``` js
function checkout ({ dispatch, state }, products) {
// save the current in cart items
const savedCartItems = [...state.cart.added]
// send out checkout request, and optimistically
// clear the cart
dispatch(types.CHECKOUT_REQUEST)
// the shop API accepts a success callback and a failure callback
shop.buyProducts(
products,
// handle success
() => dispatch(types.CHECKOUT_SUCCESS),
// handle failure
() => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
)
}
```

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**.

### Chamando Ações em Componentes

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`:

``` js
// inside a component
import { incrementBy } from './actions'

const vm = new Vue({
vuex: {
getters: { ... }, // state getters
actions: {
incrementBy // ES6 object literal shorthand, bind using the same name
}
}
})
```

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:

``` js
vm.incrementBy(1)
```

é o mesmo que:

``` js
incrementBy(vm.$store, 1)
```

Mas o benefício é que nós podemos vincular essa ação ao template do componente e utilizá-lo mais facilmente:

``` html
<button v-on:click="incrementBy(1)">increment by one</button>
```

E você pode usar um nome diferente ao método ao vincular uma ação:

``` js
// inside a component
import { incrementBy } from './actions'

const vm = new Vue({
vuex: {
getters: { ... },
actions: {
plus: incrementBy // bind using a different name
}
}
})
```

Agora a ação será conectada como `vm.plus` ao invés de `vm.incrementBy`.

### Ações Inline

Se uma ação é específica à um componente, você pode utilizar um atalho e definí-la diretamente no componente:

``` js
const vm = new Vue({
vuex: {
getters: { ... },
actions: {
plus: ({ dispatch }) => dispatch('INCREMENT')
}
}
})
```

### Vinculando todas Ações

Se você quiser vincular todas as ações compartilhadas:

``` js
import * as actions from './actions'

const vm = new Vue({
vuex: {
getters: { ... },
actions // bind all actions
}
})
```
94 changes: 94 additions & 0 deletions docs/pt/api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
# Referência da API

### Vuex.Store

``` js
import Vuex from 'vuex'

const store = new Vuex.Store({ ...options })
```

### Opções do Construtor Vuex.Store

- **state**

- tipo: `Objeto`

O objeto de estado raíz para o armazém Vuex.

[Detalhes](state.md)

- **mutations**

- tipo: `Objeto`

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.

[Detalhes](mutations.md)

- **modules**

- tipo: `Objeto`

Um objeto que contém submódulos para serem combinados dentro do armazém, no seguinte formato:

``` js
{
key: {
state,
mutations
},
...
}
```

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.

- **middlewares**

- tipo: `Array<Objeto>`

Um array de objetos de middleware que estão no seguinte formato:

``` js
{
snapshot: Boolean, // padrão: false
onInit: Function,
onMutation: Function
}
```

Todos os campos são opcionais. [Detalhes](middlewares.md)

- **strict**

- tipo: `Boolean`
- padrão: `false`

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.

[Detalhes](strict.md)

### Propriedades da Instância Vuex.Store

- **state**

- tipo: `Objeto`

O estado raíz. Somente leitura.

### Métodos da Instância Vuex.Store

- **dispatch(mutationName: String, ...args)**

Dispara diretamente uma mutação. Isso é útil em algumas situações, mas geralmente você ira preferir utilizar as ações no seu código.

- **watch(pathOrGetter: String|Function, cb: Function, [options: Object])**

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.

Para finalizar a observação, chame a função de retorno.

- **hotUpdate(newOptions: Object)**

Atualização em tempo real de ações e mutações. [Detalhes](hot-reload.md)
1 change: 1 addition & 0 deletions docs/pt/book.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
../book.json
89 changes: 89 additions & 0 deletions docs/pt/data-flow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
# Fluxo de Dados

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.

### O Armazém

``` js
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// estado inicial do app
const state = {
count: 0
}

// definindo as possíveis mutações
const mutations = {
INCREMENT (state) {
state.count++
},
DECREMENT (state) {
state.count--
}
}

// criando o armazém
export default new Vuex.Store({
state,
mutations
})
```

### Ações

``` js
// actions.js
export const increment = ({ dispatch }) => dispatch('INCREMENT')
export const decrement = ({ dispatch }) => dispatch('DECREMENT')
```

### Utilizando-o com o Vue

**Template**

``` html
<div id="app">
Clicked: {{ count }} times
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
</div>
```

**Script**

``` js
// Nós estamos importando e injetando o armazém aqui porque
// essa é nossa instância raiz. Em aplicações maiores você só precisa fazer isso uma vez.
import store from './store'
import { increment, decrement } from './actions'

const app = new Vue({
el: '#app',
store,
vuex: {
getters: {
count: state => state.count
},
actions: {
increment,
decrement
}
}
})
```

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.

Você também irá perceber que o fluxo de dados é unidirecional, como deveria ser no Flux:

1. O input do usuário no componente dispara uma chamada para uma ação;
2. As Ações disparam mutações que modificam o estado;
3. As alterações no estado são refletidas no componente via getters.

<p align="center">
<img width="700px" src="vuex.png">
</p>
41 changes: 41 additions & 0 deletions docs/pt/forms.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Manipulação de Formulários

Ao utilizar o modo strict do Vuex, é um pouquinho diferente o uso do `v-model`, já que o estado pertence ao Vuex:

``` html
<input v-model="obj.message">
```

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.

A maneira "Vuex" de lidar com os formulários é vincular o valor do `<input>`' e chamar uma ação nos eventos `input` ou `change`:

``` html
<input :value="message" @input="updateMessage">
```
``` js
// ...
vuex: {
getters: {
message: state => state.obj.message
},
actions: {
updateMessage: ({ dispatch }, e) => {
dispatch('UPDATE_MESSAGE', e.target.value)
}
}
}
```

E aqui é o handler da mutação:

``` js
// ...
mutations: {
UPDATE_MESSAGE (state, message) {
state.obj.message = message
}
}
```

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`.
Loading

0 comments on commit a918715

Please sign in to comment.