Skip to content

(Some fixes for Vuex 3 ptbr docs) #1885

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Nov 24, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
ab0e0aa
First Commit
periscuelo Jun 4, 2018
bd79bcc
Translated the inital files
periscuelo Jun 6, 2018
cf0a3f7
Translated the api docs
periscuelo Jun 7, 2018
2faaa81
Translate some files
periscuelo Jun 8, 2018
880a467
Translate some more files
periscuelo Jun 8, 2018
f45a57f
One more file
periscuelo Jun 8, 2018
1c7731c
made some fixes in translation
periscuelo Jun 8, 2018
fc1c20e
made some fixes in translation
periscuelo Jun 8, 2018
0a2ff9e
make some fixes and translates
periscuelo Jun 8, 2018
a6fb8e3
Add more translations and fixes
periscuelo Jun 10, 2018
0b2603e
Add more translations and fixes
periscuelo Jun 10, 2018
0b77c9f
Add the last file translated
periscuelo Jun 10, 2018
4f80af7
update fork merging
periscuelo Jan 9, 2019
9907cc8
Update store pattern link
periscuelo Jan 9, 2019
90a80dd
Removing conflicts
periscuelo Jan 9, 2019
9794f46
removing the forgotten english text
periscuelo Jan 9, 2019
e59110a
Merge remote-tracking branch 'remotes/upstream/dev' into dev
periscuelo Jan 17, 2019
53c3a3f
Updated docs to 3.1.0
periscuelo Jan 17, 2019
0d4ac73
Update docs/ptbr/api/README.md
ErickPetru Jan 30, 2019
f775606
Update docs/ptbr/api/README.md
ErickPetru Jan 30, 2019
b6ce3c0
Update docs/ptbr/guide/modules.md
ErickPetru Jan 30, 2019
7db0b0c
Merge branch 'dev' into dev
periscuelo Jan 30, 2019
9e88261
Merge remote-tracking branch 'upstream/dev' into dev
periscuelo Nov 23, 2020
99d6759
Some fixes for Vuex 3 docs
periscuelo Nov 23, 2020
26e30ec
Some fixes for Vuex 3 docs
periscuelo Nov 23, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ module.exports = {
{
text: 'v3.x',
items: [
{ text: 'v4.x', link: 'https://next.vuex.vuejs.org/' }
{ text: 'v4.x', link: 'https://next.vuex.vuejs.org/ptbr/' }
]
}
],
Expand Down
14 changes: 9 additions & 5 deletions docs/ptbr/README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
# O que é Vuex?

::: tip NOTE
Esta documentação é para o Vuex 3, que funciona com Vue 2. Se você está procurando a documentação para o Vuex 4, que funciona com Vue 3, [por favor, confira aqui](https://next.vuex.vuejs.org/ptbr/).
:::

<VideoPreview />

O Vuex é um **padrão de gerenciamento de estado + biblioteca** para aplicativos Vue.js. Ele serve como um _store_ centralizado para todos os componentes em uma aplicação, com regras garantindo que o estado só possa ser mutado de forma previsível. Ele também se integra com a extensão oficial [Vue devtools](https://github.com/vuejs/vue-devtools) para fornecer recursos avançados sem configurações adicionais, como depuração viajando pelo histórico de estado (_time travel_) e exportação/importação de registros de estado em determinado momento.
O Vuex é um **padrão de gerenciamento de estado + biblioteca** para aplicações Vue.js. Ele serve como um _store_ centralizado para todos os componentes em uma aplicação, com regras garantindo que o estado só possa ser mutado de forma previsível. Ele também se integra com a extensão oficial [Vue devtools](https://github.com/vuejs/vue-devtools) para fornecer recursos avançados sem configurações adicionais, como depuração viajando pelo histórico de estado (_time travel_) e exportação/importação de registros de estado em determinado momento.

### O que é um "Padrão de Gerenciamento do Estado"?

Vamos começar com um aplicativo simples de contador Vue:
Vamos começar com uma aplicação simples de contador Vue:

``` js
new Vue({
Expand All @@ -29,9 +33,9 @@ new Vue({
})
```

É um aplicativo independente com as seguintes partes:
É uma aplicação independente com as seguintes partes:

- O **estado** (_state_), que é a fonte da verdade que direciona nosso aplicativo;
- O **estado** (_state_), que é a fonte da verdade que direciona nossa aplicação;
- A **_view_**, que é apenas um mapeamento declarativo do **estado**;
- As **ações** (_actions_), que são as possíveis maneiras pelas quais o estado pode mudar em reação às interações dos usuários da **_view_**.

Expand Down Expand Up @@ -62,6 +66,6 @@ Se você quiser aprender Vuex de um modo interativo, você pode conferir esse cu

Embora o Vuex nos ajude a lidar com o gerenciamento de estado compartilhado, ele também vem com o custo de mais conceitos e códigos repetitivos. É uma escolha de prós e contras entre produtividade de curto e longo prazo

Se você nunca construiu um SPA em grande escala e for direto para o Vuex, ele pode parecer detalhado e desanimador. Isso é perfeitamente normal - se o seu aplicativo é simples, você provavelmente ficará bem sem o Vuex. Um simples [store pattern](https://br.vuejs.org/v2/guide/state-management.html#Gerenciamento-de-Estado-do-Zero) pode ser tudo que você precisa. Mas, se você está criando um SPA de médio a grande porte, é provável que tenha encontrado situações que fazem você pensar em como lidar melhor com o estado fora de seus componentes do Vue, e o Vuex será o próximo passo natural para você. Há uma boa citação de Dan Abramov, o autor do Redux:
Se você nunca construiu um SPA em grande escala e for direto para o Vuex, ele pode parecer detalhado e desanimador. Isso é perfeitamente normal - se a sua aplicação é simples, você provavelmente ficará bem sem o Vuex. Um simples [store pattern](https://br.vuejs.org/v2/guide/state-management.html#Gerenciamento-de-Estado-do-Zero) pode ser tudo que você precisa. Mas, se você está criando um SPA de médio a grande porte, é provável que tenha encontrado situações que fazem você pensar em como lidar melhor com o estado fora de seus componentes do Vue, e o Vuex será o próximo passo natural para você. Há uma boa citação de Dan Abramov, o autor do Redux:

> As bibliotecas _Flux_ são como óculos: você saberá quando precisar delas.
16 changes: 8 additions & 8 deletions docs/ptbr/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const store = new Vuex.Store({ ...options })
rootGetters // todos os getters
```

Os _getters_ registrados estão expostos em _store.getters_.
Os _getters_ registrados estão expostos em `store.getters`.

[Detalhes](../guide/getters.md)

Expand All @@ -95,15 +95,15 @@ const store = new Vuex.Store({ ...options })
}
```

Cada módulo pode conter `estado` e `mutações` semelhantes às opções raiz. O estado de um módulo será anexado ao estado da raiz do _store_ usando a chave do módulo. As mutações e _getters_ de um módulo receberão apenas o estado local do módulo como o 1º argumento em vez do estado da raiz e as ações do módulo _context.state_ também apontarão para o estado local.
Cada módulo pode conter `estado` e `mutações` semelhantes às opções raiz. O estado de um módulo será anexado ao estado da raiz do _store_ usando a chave do módulo. As mutações e _getters_ de um módulo receberão apenas o estado local do módulo como o 1º argumento em vez do estado da raiz e as ações do módulo `context.state` também apontarão para o estado local.

[Detalhes](../guide/modules.md)

### plugins

- type: `Array<Function>`

Um _Array_ de funções de plug-in a serem aplicadas no _store_. O plug-in simplesmente recebe o _store_ como o único argumento e pode ouvir mutações (para persistência de dados de saída, registro ou depuração) ou mutações de despacho (para dados de entrada, por exemplo, websockets ou _observables_).
Um _Array_ de funções de _plugin_ a serem aplicadas no _store_. O _plugin_ simplesmente recebe o _store_ como o único argumento e pode ouvir mutações (para persistência de dados de saída, registro ou depuração) ou mutações de despacho (para dados de entrada, por exemplo, websockets ou _observables_).

[Detalhes](../guide/plugins.md)

Expand All @@ -120,7 +120,7 @@ const store = new Vuex.Store({ ...options })

- type: `boolean`

Ative ou desative as ferramentas de desenvolvedor para uma determinada instância vuex. Passar _false_ à instância diz ao _store_ Vuex para não se integrar ao _devtools_. Útil para quando se tem vários _stores_ em uma _single page_.
Ative ou desative as ferramentas de desenvolvedor para uma determinada instância vuex. Passar `false` à instância diz ao _store_ Vuex para não se integrar ao _devtools_. Útil para quando se tem vários _stores_ em uma _single_ _page_.

``` js
{
Expand Down Expand Up @@ -149,14 +149,14 @@ const store = new Vuex.Store({ ...options })
- `commit(type: string, payload?: any, options?: Object)`
- `commit(mutation: Object, options?: Object)`

Confirma (ou faz um _Commit_ de) uma mutação. _options_ pode ter _root: true_ que permite confirmar mutações da raiz em [módulos namespaced](../guide/modules.md#namespacing). [Detalhes](../guide/mutations.md)
Confirma (ou faz um _Commit_ de) uma mutação. _options_ pode ter `root: true` que permite confirmar mutações da raiz em [módulos namespaced](../guide/modules.md#namespacing). [Detalhes](../guide/mutations.md)

### dispatch

- `dispatch(type: string, payload?: any, options?: Object): Promise<any>`
- `dispatch(action: Object, options?: Object): Promise<any>`

Despacha uma ação. _options_ pode ter _root: true_ que permite despachar ações para raiz em [módulos namespaced](../guide/modules.md#namespacing). Retorna um _Promise_ que resolve todos os manipuladores de ação acionados. [Detalhes](../guide/actions.md)
Despacha uma ação. _options_ pode ter `root: true` que permite despachar ações para raiz em [módulos namespaced](../guide/modules.md#namespacing). Retorna um _Promise_ que resolve todos os manipuladores de ação acionados. [Detalhes](../guide/actions.md)

### replaceState

Expand Down Expand Up @@ -229,7 +229,7 @@ const store = new Vuex.Store({ ...options })

Registra um módulo dinâmico. [Detalhes](../guide/modules.md#registro-de-modulo-dinamico)

_options_ can have _preserveState: true_ que permite preservar o estado anterior. Útil com renderização do lado do servidor (_server-side-rendering_).
_options_ can have `preserveState: true` que permite preservar o estado anterior. Útil com renderização do lado do servidor (_server-side-rendering_).

### unregisterModule

Expand Down Expand Up @@ -287,4 +287,4 @@ const store = new Vuex.Store({ ...options })

- `createNamespacedHelpers(namespace: string): Object`

Cria um componente _namespaced_ dos métodos auxiliares. O objeto retornado possui _mapState_, _mapGetters_, _mapActions_ e _mapMutations_, que estão conectados com o dado _namespace_. [Detalhes](../guide/modules.md#usando-metodos-auxiliares-com-namespace)
Cria um componente _namespaced_ dos métodos auxiliares. O objeto retornado possui `mapState`, `mapGetters`, `mapActions` e `mapMutations`, que estão conectados com o dado _namespace_. [Detalhes](../guide/modules.md#usando-metodos-auxiliares-com-namespace)
6 changes: 3 additions & 3 deletions docs/ptbr/guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,18 @@ const store = new Vuex.Store({
})
```

Agora, você pode acessar o objeto de estado como _store.state_ e acionar uma mudança de estado com o método _store.commit_:
Agora, você pode acessar o objeto de estado como `store.state` e acionar uma mudança de estado com o método `store.commit`:

``` js
store.commit('increment')

console.log(store.state.count) // -> 1
```

Novamente, a razão pela qual estamos confirmando (ou fazendo _commit_ de) uma mutação em vez de mudar _store.state.count_ diretamente, é porque queremos rastreá-la explicitamente. Esta convenção simples torna sua intenção mais explícita, de modo que você possa ter melhores argumetos sobre as mudanças de estado em seu aplicativo ao ler o código. Além disso, isso nos dá a oportunidade de implementar ferramentas que podem registrar cada mutação, capturar momentos do estado ou mesmo realizar depuração viajando pelo histórico de estado (_time travel_).
Novamente, a razão pela qual estamos confirmando (ou fazendo _commit_ de) uma mutação em vez de mudar `store.state.count` diretamente, é porque queremos rastreá-la explicitamente. Esta convenção simples torna sua intenção mais explícita, de modo que você possa ter melhores argumetos sobre as mudanças de estado em sua aplicação ao ler o código. Além disso, isso nos dá a oportunidade de implementar ferramentas que podem registrar cada mutação, capturar momentos do estado ou mesmo realizar depuração viajando pelo histórico de estado (_time travel_).

Usar o estado do _store_ em um componente simplesmente envolve o retorno do estado dentro de um dado computado, porque o estado do _store_ é reativo. Acionar alterações simplesmente significa confirmar (ou fazer _commit_ de) mutações nos métodos dos componentes.

Aqui está um exemplo do [aplicativo de contador do Vuex mais básico](https://jsfiddle.net/n9jmu5v7/1269/).
Aqui está um exemplo da [aplicação de contador do Vuex mais básico](https://jsfiddle.net/n9jmu5v7/1269/).

Em seguida, discutiremos cada conceito chave em mais detalhes, começando com [Estado](state.md).
10 changes: 5 additions & 5 deletions docs/ptbr/guide/actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const store = new Vuex.Store({
})
```

Os manipuladores de ação recebem um objeto _context_ que expõe o mesmo conjunto de métodos/propriedades na instância do _store_, para que você possa chamar _context.commit_ para confirmar uma mutação ou acessar o estado e os _getters_ através do _context.state_ e do _context.getters_. Veremos por que esse objeto _context_ não é a própria instância do _store_ quando apresentarmos [Módulos](modules.md) mais tarde.
Os manipuladores de ação recebem um objeto _context_ que expõe o mesmo conjunto de métodos/propriedades na instância do _store_, para que você possa chamar `context.commit` para confirmar uma mutação ou acessar o estado e os _getters_ através do `context.state` e do `context.getters`. Veremos por que esse objeto _context_ não é a própria instância do _store_ quando apresentarmos [Módulos](modules.md) mais tarde.

Na prática, muitas vezes usamos ES2015 [desestruturação de argumentos](https://github.com/lukehoban/es6features#destructuring) para simplificar um pouco o código (especialmente quando precisamos usar _commit_ várias vezes):

Expand All @@ -41,7 +41,7 @@ actions: {

### Ações de Despacho

As ações são acionadas com o método _store.dispatch_:
As ações são acionadas com o método `store.dispatch`:

``` js
store.dispatch('increment')
Expand Down Expand Up @@ -100,7 +100,7 @@ Observe que estamos realizando um fluxo de operações assíncronas, e gravando

### Ações de Despacho em Componentes

Você pode despachar ações em componentes com `this.$store.dispatch('xxx')`, ou usar o auxiliar _mapActions_ que mapeia métodos do componente para chamadas do _store.dispatch_ (esta ação requer injeção do _store_ na instância raiz):
Você pode despachar ações em componentes com `this.$store.dispatch('xxx')`, ou usar o auxiliar _mapActions_ que mapeia métodos do componente para chamadas do `store.dispatch` (esta ação requer injeção do _store_ na instância raiz):

``` js
import { mapActions } from 'vuex'
Expand All @@ -125,7 +125,7 @@ export default {

As ações geralmente são assíncronas, então como sabemos quando uma ação é realizada? E mais importante, como podemos compor ações múltiplas em conjunto para lidar com fluxos assíncronos mais complexos?

A primeira coisa a saber é que o _store.dispatch_ pode manipular o _Promise_ retornado pelo manipulador de ação acionado e também retorna _Promise_:
A primeira coisa a saber é que o `store.dispatch` pode manipular o _Promise_ retornado pelo manipulador de ação acionado e também retorna _Promise_:

``` js
actions: {
Expand Down Expand Up @@ -177,4 +177,4 @@ actions: {
}
```

> É possível para um _store.dispatch_ desencadear vários manipuladores de ação em diferentes módulos. Neste caso, o valor retornado será um _Promise_ que resolve quando todos os manipuladores desencadeados foram resolvidos.
> É possível para um `store.dispatch` desencadear vários manipuladores de ação em diferentes módulos. Neste caso, o valor retornado será um _Promise_ que resolve quando todos os manipuladores desencadeados foram resolvidos.
4 changes: 2 additions & 2 deletions docs/ptbr/guide/getters.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ const store = new Vuex.Store({

### Acesso Estilo-Propriedade

Os _getters_ serão expostos no objeto _store.getters_ e você acessa valores como propriedades:
Os _getters_ serão expostos no objeto `store.getters` e você acessa valores como propriedades:

``` js
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
```

Os _getters_ também receberão outros _getters_ como o 2º argumento:
Os _getters_ também receberão outros `getters` como o 2º argumento:

``` js
getters: {
Expand Down
Loading