Merge pull request #148 from danielesreis/guide/state-management-pt-br

guide: Translates state-management to pt-br

Author: GuiDevloper

src/guide/state-management.md

@@ -1,20 +1,20 @@
-# State Management
+# Gerenciamento de Estado
 
-## Official Flux-Like Implementation
+## Implementação Oficial Estilo Flux
 
-Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex), our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif).
+Grandes aplicações podem frequentemente crescer em complexidade, devido à múltiplas partes do estado da aplicação espalhadas em vários componentes e em interações entre eles. Para resolver esse problema, Vue oferece o [Vuex](https://github.com/vuejs/vuex), nossa própria biblioteca de gerenciamento de estado inspirada na arquitetura Elm. Ele é também integrado ao [vue-devtools](https://github.com/vuejs/vue-devtools), permitindo uma [navegação pelo histórico de mudanças de estado](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif) (_time travel debugging_) sem qualquer configuração inicial.
 
-### Information for React Developers
+### Informação para Desenvolvedores React
 
-If you're coming from React, you may be wondering how vuex compares to [redux](https://github.com/reactjs/redux), the most popular Flux implementation in that ecosystem. Redux is actually view-layer agnostic, so it can easily be used with Vue via [simple bindings](https://classic.yarnpkg.com/en/packages?q=redux%20vue&p=1). Vuex is different in that it _knows_ it's in a Vue app. This allows it to better integrate with Vue, offering a more intuitive API and improved development experience.
+Se você vem do React, deve estar se perguntando como o Vuex se compara ao [Redux](https://github.com/reactjs/redux), a implementação Flux mais popular do ecossistema. O Redux é agnóstico quanto à camada _view_, de forma que ele pode ser usado facilmente com Vue através de [ligações simples](https://classic.yarnpkg.com/en/packages?q=redux%20vue&p=1). O Vuex é diferente por **saber** que está em uma aplicação Vue. Isso permite uma melhor integração com Vue ao fornecer uma API mais intuitiva e uma melhor experiência de desenvolvimento.
 
-## Simple State Management from Scratch
+## Gerenciamento de Estado Simples do Zero
 
-It is often overlooked that the source of truth in Vue applications is the reactive `data` object - a component instance only proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can use a [reactive](/guide/reactivity-fundamentals.html#declaring-reactive-state) method to make an object reactive:
+Frequentemente as pessoas esquecem que a fonte de verdade de aplicações Vue são os objetos reativos `data` - uma instância Vue apenas direciona acesso à eles. Portanto, se você possui uma parte do estado que deveria ser compartilhado entre instâncias múltiplas, você pode usar um método [`reactive`](/guide/reactivity-fundamentals.html#declaring-reactive-state) para tornar um objeto reativo.
 
 ```js
 const sourceOfTruth = Vue.reactive({
-  message: 'Hello'
+  message: 'Olá'
 })
 
 const appA = Vue.createApp({
@@ -36,50 +36,50 @@ const appB = Vue.createApp({
 <div id="app-b">App B: {{ message }}</div>
 ```
 
-Now whenever `sourceOfTruth` is mutated, both `appA` and `appB` will update their views automatically. We have a single source of truth now, but debugging would be a nightmare. Any piece of data could be changed by any part of our app at any time, without leaving a trace.
+Agora, sempre que `sourceOfTruth` mudar, tanto `appA` e `appB` irão atualizar suas _views_ automaticamente. Possuímos uma única fonte de verdade agora, porém a depuração vira um pesadelo. Qualquer dado pode ser modificado em qualquer parte de nossa aplicação a qualquer momento, sem deixar rastro algum.
 
 ```js
 const appB = Vue.createApp({
   data() {
     return sourceOfTruth
   },
   mounted() {
-    sourceOfTruth.message = 'Goodbye' // both apps will render 'Goodbye' message now
+    sourceOfTruth.message = 'Adeus' // ambas aplicações irão renderizar "Adeus"
   }
 }).mount('#app-b')
 ```
 
-To help solve this problem, we can adopt a **store pattern**:
+Para ajudar a resolver esse problema, podemos adotar o padrão **store**:
 
 ```js
 const store = {
   debug: true,
 
   state: Vue.reactive({
-    message: 'Hello!'
+    message: 'Olá!'
   }),
 
   setMessageAction(newValue) {
     if (this.debug) {
-      console.log('setMessageAction triggered with', newValue)
+      console.log('setMessageAction disparado com', newValue)
     }
 
     this.state.message = newValue
   },
 
   clearMessageAction() {
     if (this.debug) {
-      console.log('clearMessageAction triggered')
+      console.log('clearMessageAction disparado')
     }
 
     this.state.message = ''
   }
 }
 ```
 
-Notice all actions that mutate the store's state are put inside the store itself. This type of centralized state management makes it easier to understand what type of mutations could happen and how they are triggered. Now when something goes wrong, we'll also have a log of what happened leading up to the bug.
+Perceba que todas as ações que modificam o estado da store são colocadas dentro da própria store. Esse tipo de gerenciamento de estado centralizado facilita a compreensão de que tipo de mutações podem acontecer e como elas são disparadas. Agora, temos um _log_ de mudanças para quando algo der errado.
 
-In addition, each instance/component can still own and manage its own private state:
+Além disso, cada instância/componente pode ainda possuir e gerenciar seu estado privado:
 
 ```html
 <div id="app-a">{{sharedState.message}}</div>
@@ -96,7 +96,7 @@ const appA = Vue.createApp({
     }
   },
   mounted() {
-    store.setMessageAction('Goodbye!')
+    store.setMessageAction('Adeus!')
   }
 }).mount('#app-a')
 
@@ -110,12 +110,12 @@ const appB = Vue.createApp({
 }).mount('#app-b')
 ```
 
-![State Management](/images/state.png)
+![Gerenciamento de Estado](/images/state.png)
 
-::: tip
-You should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations to be observed.
+::: tip Dica
+Você jamais deve substituir o objeto `state` original - os componentes e a store precisam compartilhar a referência para o mesmo objeto, de forma que as mutações sejam acompanhadas.
 :::
 
-As we continue developing the convention, where components are never allowed to directly mutate state that belongs to a store but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel.
+Ao desenvolvermos uma convenção em que componentes não devem modificar diretamente o estado pertencente à store, mas sim disparar eventos que comuniquem a store à realizar ações, nós chegamos na arquitetura [Flux](https://facebook.github.io/flux/). A vantagem dessa convenção é que podemos registrar todas as mudanças de estado e implementar auxiliares avançados de depuração, tais como _logs_ de mutação, _snapshots_ e repetição de histórico (_history re-rolls_) / navegação de histórico (_time travel_).
 
-This brings us full circle back to [Vuex](https://github.com/vuejs/vuex), so if you've read this far it's probably time to try it out!
+O que nos leva totalmente de volta ao [Vuex](https://github.com/vuejs/vuex), então se você leu até aqui, provavelmente é hora de testá-lo!