Merge pull request #126 from vitorarjol/master

Adding Portuguese Translation for Vuex

Author: yyx990803

docs/LANGS.md

@@ -1,3 +1,4 @@
 * [English](en/)
 * [简体中文 (outdated)](zh-cn/)
 * [日本語 (outdated)](ja/)
+* [Português](pt/)

docs/pt/README.md

@@ -0,0 +1 @@
+SUMMARY.md

docs/pt/SUMMARY.md

@@ -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)

docs/pt/actions.md

@@ -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
+  }
+})
+```

docs/pt/api.md

@@ -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)

docs/pt/book.json

@@ -0,0 +1 @@
+../book.json

docs/pt/data-flow.md

@@ -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>

docs/pt/forms.md

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