From 6e80a920d91c8310cea0fde0a6dcde9043c6ae8c Mon Sep 17 00:00:00 2001 From: perborgen Date: Sun, 10 Feb 2019 12:59:02 +0100 Subject: [PATCH 1/5] docs: add Scrimba lessons to guide --- docs/README.md | 2 ++ docs/guide/README.md | 2 ++ docs/guide/actions.md | 2 ++ docs/guide/forms.md | 2 ++ docs/guide/getters.md | 2 ++ docs/guide/modules.md | 2 ++ docs/guide/mutations.md | 2 ++ docs/guide/plugins.md | 2 ++ docs/guide/state.md | 4 ++++ docs/guide/testing.md | 2 ++ 10 files changed, 22 insertions(+) diff --git a/docs/README.md b/docs/README.md index 3cddf78d3..67283092e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -54,6 +54,8 @@ In addition, by defining and separating the concepts involved in state managemen This is the basic idea behind Vuex, inspired by [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) and [The Elm Architecture](https://guide.elm-lang.org/architecture/). Unlike the other patterns, Vuex is also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. +If you want to learn Vuex in an interactive way you can check out this [Vuex course on Scrimba](https://scrimba.com/g/gvuex), which gives you a mix of screencast and code playground that you can pause and play around with anytime. + ![vuex](/vuex.png) ### When Should I Use It? diff --git a/docs/guide/README.md b/docs/guide/README.md index 496c665f7..45882a5c3 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -1,5 +1,7 @@ # Getting Started +
Try this lesson on Scrimba
+ At the center of every Vuex application is the **store**. A "store" is basically a container that holds your application **state**. There are two things that make a Vuex store different from a plain global object: 1. Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. diff --git a/docs/guide/actions.md b/docs/guide/actions.md index b022332e2..7bf4fc933 100644 --- a/docs/guide/actions.md +++ b/docs/guide/actions.md @@ -1,5 +1,7 @@ # Actions +
Try this lesson on Scrimba
+ Actions are similar to mutations, the differences being that: - Instead of mutating the state, actions commit mutations. diff --git a/docs/guide/forms.md b/docs/guide/forms.md index 37fd58e56..d9d4d586f 100644 --- a/docs/guide/forms.md +++ b/docs/guide/forms.md @@ -1,5 +1,7 @@ # Form Handling +
Try this lesson on Scrimba
+ When using Vuex in strict mode, it could be a bit tricky to use `v-model` on a piece of state that belongs to Vuex: ``` html diff --git a/docs/guide/getters.md b/docs/guide/getters.md index 124f38fac..981901efc 100644 --- a/docs/guide/getters.md +++ b/docs/guide/getters.md @@ -1,5 +1,7 @@ # Getters +
Try this lesson on Scrimba
+ Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them: ``` js diff --git a/docs/guide/modules.md b/docs/guide/modules.md index 161591b02..8715ce748 100644 --- a/docs/guide/modules.md +++ b/docs/guide/modules.md @@ -1,5 +1,7 @@ # Modules +
Try this lesson on Scrimba
+ Due to using a single state tree, all state of our application is contained inside one big object. However, as our application grows in scale, the store can get really bloated. To help with that, Vuex allows us to divide our store into **modules**. Each module can contain its own state, mutations, actions, getters, and even nested modules - it's fractal all the way down: diff --git a/docs/guide/mutations.md b/docs/guide/mutations.md index 965d0c62c..8c206529c 100644 --- a/docs/guide/mutations.md +++ b/docs/guide/mutations.md @@ -1,5 +1,7 @@ # Mutations +
Try this lesson on Scrimba
+ The only way to actually change state in a Vuex store is by committing a mutation. Vuex mutations are very similar to events: each mutation has a string **type** and a **handler**. The handler function is where we perform actual state modifications, and it will receive the state as the first argument: ``` js diff --git a/docs/guide/plugins.md b/docs/guide/plugins.md index 22f937aa8..fe4939c0a 100644 --- a/docs/guide/plugins.md +++ b/docs/guide/plugins.md @@ -1,5 +1,7 @@ # Plugins +
Try this lesson on Scrimba
+ Vuex stores accept the `plugins` option that exposes hooks for each mutation. A Vuex plugin is simply a function that receives the store as the only argument: ``` js diff --git a/docs/guide/state.md b/docs/guide/state.md index 40d477b08..b89c39bc9 100644 --- a/docs/guide/state.md +++ b/docs/guide/state.md @@ -2,6 +2,8 @@ ### Single State Tree +
Try this lesson on Scrimba
+ Vuex uses a **single state tree** - that is, this single object contains all your application level state and serves as the "single source of truth". This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes. The single state tree does not conflict with modularity - in later chapters we will discuss how to split your state and mutations into sub modules. @@ -58,6 +60,8 @@ const Counter = { ### The `mapState` Helper +
Try this lesson on Scrimba
+ When a component needs to make use of multiple store state properties or getters, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the `mapState` helper which generates computed getter functions for us, saving us some keystrokes: ``` js diff --git a/docs/guide/testing.md b/docs/guide/testing.md index 63b9d9120..3ca0bdf2d 100644 --- a/docs/guide/testing.md +++ b/docs/guide/testing.md @@ -1,5 +1,7 @@ # Testing +
Try this lesson on Scrimba
+ The main parts we want to unit test in Vuex are mutations and actions. ### Testing Mutations From e8c0d9b2d584f2a8179333396d42067cba6cab4c Mon Sep 17 00:00:00 2001 From: Per Harald Borgen Date: Wed, 20 Feb 2019 22:06:16 +0100 Subject: [PATCH 2/5] docs: add localizations for Scrimba lessons --- docs/fr/README.md | 2 ++ docs/fr/guide/README.md | 2 ++ docs/fr/guide/actions.md | 2 ++ docs/fr/guide/forms.md | 2 ++ docs/fr/guide/getters.md | 2 ++ docs/fr/guide/modules.md | 2 ++ docs/fr/guide/mutations.md | 2 ++ docs/fr/guide/plugins.md | 2 ++ docs/fr/guide/state.md | 4 ++++ docs/fr/guide/testing.md | 2 ++ docs/ja/README.md | 2 ++ docs/ja/guide/README.md | 2 ++ docs/ja/guide/actions.md | 2 ++ docs/ja/guide/forms.md | 2 ++ docs/ja/guide/getters.md | 2 ++ docs/ja/guide/modules.md | 2 ++ docs/ja/guide/mutations.md | 2 ++ docs/ja/guide/plugins.md | 2 ++ docs/ja/guide/state.md | 4 ++++ docs/ja/guide/testing.md | 2 ++ docs/kr/README.md | 2 ++ docs/kr/guide/README.md | 2 ++ docs/kr/guide/actions.md | 2 ++ docs/kr/guide/forms.md | 2 ++ docs/kr/guide/getters.md | 2 ++ docs/kr/guide/modules.md | 2 ++ docs/kr/guide/mutations.md | 2 ++ docs/kr/guide/plugins.md | 2 ++ docs/kr/guide/state.md | 4 ++++ docs/kr/guide/testing.md | 2 ++ docs/ptbr/README.md | 2 ++ docs/ptbr/guide/README.md | 2 ++ docs/ptbr/guide/actions.md | 2 ++ docs/ptbr/guide/forms.md | 2 ++ docs/ptbr/guide/getters.md | 2 ++ docs/ptbr/guide/modules.md | 2 ++ docs/ptbr/guide/mutations.md | 2 ++ docs/ptbr/guide/plugins.md | 2 ++ docs/ptbr/guide/state.md | 4 ++++ docs/ptbr/guide/testing.md | 2 ++ docs/ru/README.md | 2 ++ docs/ru/guide/README.md | 2 ++ docs/ru/guide/actions.md | 2 ++ docs/ru/guide/forms.md | 2 ++ docs/ru/guide/getters.md | 2 ++ docs/ru/guide/modules.md | 2 ++ docs/ru/guide/mutations.md | 2 ++ docs/ru/guide/plugins.md | 2 ++ docs/ru/guide/state.md | 4 ++++ docs/ru/guide/testing.md | 2 ++ docs/zh/README.md | 2 ++ docs/zh/guide/README.md | 2 ++ docs/zh/guide/actions.md | 2 ++ docs/zh/guide/forms.md | 2 ++ docs/zh/guide/getters.md | 2 ++ docs/zh/guide/modules.md | 2 ++ docs/zh/guide/mutations.md | 2 ++ docs/zh/guide/plugins.md | 2 ++ docs/zh/guide/state.md | 4 ++++ docs/zh/guide/testing.md | 2 ++ 60 files changed, 132 insertions(+) diff --git a/docs/fr/README.md b/docs/fr/README.md index 7ff74cb57..21aedb2bc 100644 --- a/docs/fr/README.md +++ b/docs/fr/README.md @@ -52,6 +52,8 @@ De plus, en définissant et en séparant les concepts impliqués dans la gestion Voilà l'idée de base derrière Vuex, inspiré par [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) et [l'architecture Elm](https://guide.elm-lang.org/architecture/). À l'inverse des autres modèles, Vuex est aussi une bibliothèque d'implémentation conçue spécialement pour Vue.js afin de bénéficier de son système de réactivité granulaire pour des modifications efficaces. +Si vous voulez apprendre Vuex de manière interactive, jetez un oeil à ce [cours sur Vuex sur Scrimba.](https://scrimba.com/g/gvuex) + ![vuex](/vuex.png) ### Quand l'utiliser ? diff --git a/docs/fr/guide/README.md b/docs/fr/guide/README.md index 05c32dc2f..ce251fd86 100644 --- a/docs/fr/guide/README.md +++ b/docs/fr/guide/README.md @@ -1,5 +1,7 @@ # Pour commencer + + Au cœur de chaque application Vuex, il y a la **zone de stockage (« store »)**. Un « store » est tout simplement un conteneur avec l'**état (« state »)** de votre application. Il y a deux choses qui différencient un store Vuex d'un simple objet global : 1. Les stores Vuex sont réactifs. Quand les composants Vue y récupèrent l'état, ils se mettront à jour de façon réactive et efficace si l'état du store a changé. diff --git a/docs/fr/guide/actions.md b/docs/fr/guide/actions.md index ebeacc803..2cc82bdd2 100644 --- a/docs/fr/guide/actions.md +++ b/docs/fr/guide/actions.md @@ -1,5 +1,7 @@ # Actions + + Les actions sont similaires aux mutations, à la différence que : - Au lieu de modifier l'état, les actions actent des mutations. diff --git a/docs/fr/guide/forms.md b/docs/fr/guide/forms.md index f304def1c..3d8dfef5e 100644 --- a/docs/fr/guide/forms.md +++ b/docs/fr/guide/forms.md @@ -1,5 +1,7 @@ # Gestion des formulaires + + Lorsque l'on utilise Vuex en mode strict, il peut être compliqué d'utiliser `v-model` sur une partie de l'état qui appartient à Vuex : ``` html diff --git a/docs/fr/guide/getters.md b/docs/fr/guide/getters.md index b6d6eed7c..1b70f8972 100644 --- a/docs/fr/guide/getters.md +++ b/docs/fr/guide/getters.md @@ -1,5 +1,7 @@ # Accesseurs + + Parfois nous avons besoin de calculer des valeurs basées sur l'état du store, par exemple pour filtrer une liste d'éléments et les compter : ``` js diff --git a/docs/fr/guide/modules.md b/docs/fr/guide/modules.md index 39eb9edc8..8c51472fa 100644 --- a/docs/fr/guide/modules.md +++ b/docs/fr/guide/modules.md @@ -1,5 +1,7 @@ # Modules + + Du fait de l'utilisation d'un arbre d'état unique, tout l'état de notre application est contenu dans un seul et même gros objet. Cependant, au fur et à mesure que notre application grandit, le store peut devenir très engorgé. Pour y remédier, Vuex nous permet de diviser notre store en **modules**. Chaque module peut contenir ses propres états, mutations, actions, accesseurs. Il peut même contenir ses propres modules internes. diff --git a/docs/fr/guide/mutations.md b/docs/fr/guide/mutations.md index 3b867d250..edc1f8261 100644 --- a/docs/fr/guide/mutations.md +++ b/docs/fr/guide/mutations.md @@ -1,5 +1,7 @@ # Mutations + + La seule façon de vraiment modifier l'état dans un store Vuex est d'acter une mutation. Les mutations Vuex sont très similaires aux évènements : chaque mutation a un **type** sous forme de chaine de caractères et un **gestionnaire**. La fonction de gestion est en charge de procéder aux véritables modifications de l'état, et elle reçoit l'état en premier argument : ``` js diff --git a/docs/fr/guide/plugins.md b/docs/fr/guide/plugins.md index 30aab77c0..56df03a3a 100644 --- a/docs/fr/guide/plugins.md +++ b/docs/fr/guide/plugins.md @@ -1,5 +1,7 @@ # Plugins + + Les stores Vuex prennent une option `plugins` qui expose des hooks pour chaque mutation. Un plugin Vuex est simplement une fonction qui reçoit un store comme unique argument : ``` js diff --git a/docs/fr/guide/state.md b/docs/fr/guide/state.md index 59ce19b02..63ea28263 100644 --- a/docs/fr/guide/state.md +++ b/docs/fr/guide/state.md @@ -2,6 +2,8 @@ ### Arbre d'état unique + + Vuex utilise un **arbre d'état unique**, c'est-à-dire que cet unique objet contient tout l'état au niveau applicatif et sert de « source de vérité unique ». Cela signifie également que vous n'aurez qu'un seul store pour chaque application. Un arbre d'état unique rend rapide la localisation d'une partie spécifique de l'état et permet de facilement prendre des instantanés de l'état actuel de l'application à des fins de débogage. L'arbre d'état unique n'entre pas en conflit avec la modularité. Dans les prochains chapitres, nous examinerons comment séparer votre état et vos mutations dans des sous-modules. @@ -58,6 +60,8 @@ const Counter = { ### La fonction utilitaire `mapState` + + Lorsqu'un composant a besoin d'utiliser plusieurs accesseurs ou propriétés de l'état du store, déclarer toutes ces propriétés calculées peut devenir répétitif et verbeux. Afin de pallier à ça, nous pouvons utiliser la fonction utilitaire `mapState` qui génère des fonctions d'accession pour nous et nous épargne quelques coups de clavier : ``` js diff --git a/docs/fr/guide/testing.md b/docs/fr/guide/testing.md index f0cae2b10..9682e8ba9 100644 --- a/docs/fr/guide/testing.md +++ b/docs/fr/guide/testing.md @@ -1,5 +1,7 @@ # Tests + + Les parties principales que l'on veut couvrir par des tests unitaires avec Vuex sont les mutations et les actions. ### Tester les mutations diff --git a/docs/ja/README.md b/docs/ja/README.md index 88d3e3c5b..086217eb1 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -57,6 +57,8 @@ new Vue({ これが Vuex の背景にある基本的なアイディアであり、[Flux](https://facebook.github.io/flux/docs/overview.html)、 [Redux](http://redux.js.org/) そして [The Elm Architecture](https://guide.elm-lang.org/architecture/)から影響を受けています。 他のパターンと異なるのは、Vuex は効率的な更新のために、Vue.js の粒度の細かいリアクティビティシステムを利用するよう特別に調整して実装されたライブラリだということです。 +あなたがもし対話型の方法でVuexを学びたいのであれば、[Scrimba](https://scrimba.com/g/gvuex)のVuexコースをぜひ試してみてください。 + ![vuex](/vuex.png) ### いつ、Vuexを使うべきでしょうか? diff --git a/docs/ja/guide/README.md b/docs/ja/guide/README.md index 7b7373280..d237dcc58 100644 --- a/docs/ja/guide/README.md +++ b/docs/ja/guide/README.md @@ -1,5 +1,7 @@ # Vuex 入門 + + Vuex アプリケーションの中心にあるものは**ストア**です。"ストア" は、基本的にアプリケーションの **状態(state)** を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。 1. Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。 diff --git a/docs/ja/guide/actions.md b/docs/ja/guide/actions.md index a37242917..2439b42c5 100644 --- a/docs/ja/guide/actions.md +++ b/docs/ja/guide/actions.md @@ -1,5 +1,7 @@ # アクション + + アクションはミューテーションと似ていますが、下記の点で異なります: - アクションは、状態を変更するのではなく、ミューテーションをコミットします。 diff --git a/docs/ja/guide/forms.md b/docs/ja/guide/forms.md index 075f3d9fa..2ad1f8922 100644 --- a/docs/ja/guide/forms.md +++ b/docs/ja/guide/forms.md @@ -1,5 +1,7 @@ # フォームの扱い + + 厳格モードで Vuex を使用するとき、Vuex に属する状態の一部で `v-model` を使用するのは少しトリッキーです: ``` html diff --git a/docs/ja/guide/getters.md b/docs/ja/guide/getters.md index c016b647a..417ce71de 100644 --- a/docs/ja/guide/getters.md +++ b/docs/ja/guide/getters.md @@ -1,5 +1,7 @@ # ゲッター + + 例えば項目のリストをフィルタリングしたりカウントするときのように、ストアの状態を算出したいときがあります。 ``` js diff --git a/docs/ja/guide/modules.md b/docs/ja/guide/modules.md index e0c7794c5..c8fb33c25 100644 --- a/docs/ja/guide/modules.md +++ b/docs/ja/guide/modules.md @@ -1,5 +1,7 @@ # モジュール + + 単一ステートツリーを使うため、アプリケーションの全ての状態は、一つの大きなストアオブジェクトに内包されます。しかしながら、アプリケーションが大きくなるにつれて、ストアオブジェクトは膨れ上がってきます。 そのような場合に役立てるため Vuex ではストアを**モジュール**に分割できるようになっています。それぞれのモジュールは、モジュール自身の状態(state)、ミューテーション、アクション、ゲッター、モジュールさえも内包できます(モジュールをネストできます)- トップからボトムまでフラクタル構造です: diff --git a/docs/ja/guide/mutations.md b/docs/ja/guide/mutations.md index 967ce9db2..dfd4898e8 100644 --- a/docs/ja/guide/mutations.md +++ b/docs/ja/guide/mutations.md @@ -1,5 +1,7 @@ # ミューテーション + + 実際に Vuex のストアの状態を変更できる唯一の方法は、ミューテーションをコミットすることです。Vuex のミューテーションはイベントにとても近い概念です: 各ミューテーションは**タイプ**と**ハンドラ**を持ちます。ハンドラ関数は Vuex の状態(state)を第1引数として取得し、実際に状態の変更を行います: ``` js diff --git a/docs/ja/guide/plugins.md b/docs/ja/guide/plugins.md index 9ac7da452..7420c7236 100644 --- a/docs/ja/guide/plugins.md +++ b/docs/ja/guide/plugins.md @@ -1,5 +1,7 @@ # プラグイン + + Vuex ストア は、各ミューテーションへのフックを公開する `plugins` オプションを受け付けます。 Vuex プラグインは、単一の引数としてストアを受けつけるただの関数です: ``` js diff --git a/docs/ja/guide/state.md b/docs/ja/guide/state.md index c07a125b0..7141db0de 100644 --- a/docs/ja/guide/state.md +++ b/docs/ja/guide/state.md @@ -2,6 +2,8 @@ ### 単一ステートツリー + + Vuex は **単一ステートツリー (single state tree)** を使います。つまり、この単一なオブジェクトはアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは、通常、アプリケーションごとに1つしかストアは持たないことを意味します。単一ステートツリーは状態の特定の部分を見つけること、デバッグのために現在のアプリケーションの状態のスナップショットを撮ることを容易にします。 単一ステートツリーはモジュール性と競合しません。以降の章で、アプリケーションの状態とミューテーション(変更)をサブモジュールに分割する方法について説明します。 @@ -57,6 +59,8 @@ const Counter = { ### `mapState`  ヘルパー + + コンポーネントが複数のストアのステートプロパティやゲッターを必要としているとき、これらすべてにおいて、算出プロパティを宣言することは繰り返しで冗長です。これに対処するため、算出ゲッター関数を生成し、いくつかのキーストロークを省くのに役立つ `mapState` ヘルパーを使うことができます: ```js diff --git a/docs/ja/guide/testing.md b/docs/ja/guide/testing.md index 54a00d177..e3340ca20 100644 --- a/docs/ja/guide/testing.md +++ b/docs/ja/guide/testing.md @@ -1,5 +1,7 @@ # テスト + + 私たちが Vuex でユニットテストしたい主な部分はミューテーションとアクションです。 ### ミューテーションのテスト diff --git a/docs/kr/README.md b/docs/kr/README.md index 98730c268..87e2445fe 100644 --- a/docs/kr/README.md +++ b/docs/kr/README.md @@ -52,6 +52,8 @@ new Vue({ 이는 [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/), [The Elm Architecture](https://guide.elm-lang.org/architecture/)에서 영감을 받은 Vuex의 기본 아이디어 입니다. 다른 패턴과 달리 Vuex는 Vue.js가 효율적인 업데이트를 위해 세분화된 반응 시스템을 활용하도록 특별히 고안된 라이브러리입니다. +대화식으로 Vuex를 배우고 싶다면 [Scrimba]((https://scrimba.com/g/gvuex))의 Vuex 과정에 등록하십시오. + ![vuex](/vuex.png) ### 언제 사용해야 하나요? diff --git a/docs/kr/guide/README.md b/docs/kr/guide/README.md index 4de68dc68..74cf732bc 100644 --- a/docs/kr/guide/README.md +++ b/docs/kr/guide/README.md @@ -1,5 +1,7 @@ # 시작하기 + + 모든 Vuex 애플리케이션의 중심에는 **store** 가 있습니다. "저장소"는 기본적으로 애플리케이션 **상태** 를 보유하고있는 컨테이너입니다. Vuex 저장소가 일반 전역 개체와 두 가지 다른 점이 있습니다. 1. Vuex store는 반응형 입니다. Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트합니다. diff --git a/docs/kr/guide/actions.md b/docs/kr/guide/actions.md index e36c24160..11dfcd215 100644 --- a/docs/kr/guide/actions.md +++ b/docs/kr/guide/actions.md @@ -1,5 +1,7 @@ # 액션 + + 액션은 변이와 유사합니다. 몇가지 다른 점은, - 상태를 변이시키는 대신 액션으로 변이에 대한 커밋을 합니다. diff --git a/docs/kr/guide/forms.md b/docs/kr/guide/forms.md index 03e7320c5..a332aa7ec 100644 --- a/docs/kr/guide/forms.md +++ b/docs/kr/guide/forms.md @@ -1,5 +1,7 @@ # 폼 핸들링 + + strict 모드로 Vuex를 사용하는 경우 Vuex에 포함된 부분에 `v-model`을 사용하는 것은 약간 까다로울 수 있습니다. ``` html diff --git a/docs/kr/guide/getters.md b/docs/kr/guide/getters.md index 0e42c5e1d..f38434f3e 100644 --- a/docs/kr/guide/getters.md +++ b/docs/kr/guide/getters.md @@ -1,5 +1,7 @@ # Getters + + 때로는 저장소 상태를 기반하는 상태를 계산해야 할 수도 있습니다.(예: 아이템 리스트를 필터링하고 계산) ``` js diff --git a/docs/kr/guide/modules.md b/docs/kr/guide/modules.md index 70a00267b..c2e1cd7ae 100644 --- a/docs/kr/guide/modules.md +++ b/docs/kr/guide/modules.md @@ -1,5 +1,7 @@ # 모듈 + + 단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 하나의 큰 객체 안에 포함됩니다. 그러나 규모가 커짐에 따라 저장소는 매우 비대해질 수 있습니다. 이를 위해 Vuex는 저장소를 **모듈** 로 나눌 수 있습니다. 각 모듈은 자체 상태, 변이, 액션, 게터 및 심지어 중첩된 모듈을 포함 할 수 있습니다. diff --git a/docs/kr/guide/mutations.md b/docs/kr/guide/mutations.md index 6217890e4..1f7f0f156 100644 --- a/docs/kr/guide/mutations.md +++ b/docs/kr/guide/mutations.md @@ -1,5 +1,7 @@ # 변이 + + Vuex 저장소에서 실제로 상태를 변경하는 유일한 방법은 변이하는 것입니다. Vuex 변이는 이벤트와 매우 유사합니다. 각 변이에는 **타입** 문자열 **핸들러** 가 있습니다. 핸들러 함수는 실제 상태 수정을 하는 곳이며, 첫 번째 전달인자로 상태를받습니다. ``` js diff --git a/docs/kr/guide/plugins.md b/docs/kr/guide/plugins.md index 39c264d23..a90cd64a4 100644 --- a/docs/kr/guide/plugins.md +++ b/docs/kr/guide/plugins.md @@ -1,5 +1,7 @@ # 플러그인 + + Vuex 저장소는 각 변이에 대한 훅을 노출하는 `plugins` 옵션을 허용합니다. Vuex 플러그인은 저장소를 유일한 전달인자로 받는 함수입니다. ``` js diff --git a/docs/kr/guide/state.md b/docs/kr/guide/state.md index 4827b6bb0..5dc74f04e 100644 --- a/docs/kr/guide/state.md +++ b/docs/kr/guide/state.md @@ -2,6 +2,8 @@ ### 단일 상태 트리 + + Vuex는 **단일 상태 트리** 를 사용합니다. 즉, 이 단일 객체는 모든 애플리케이션 수준의 상태를 포함하며 "원본 소스" 역할을 합니다. 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미합니다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있습니다. 단일 상태 트리는 모듈성과 충돌하지 않습니다. 나중에 상태와 변이를 하위 모듈로 분할하는 방법에 대해 설명합니다. @@ -58,6 +60,8 @@ const Counter = { ### `mapState` 헬퍼 + + 컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야하는 경우 계산된 속성을 모두 선언하면 반복적이고 장황해집니다. 이를 처리하기 위해 우리는 계산된 getter 함수를 생성하는 `mapState` 헬퍼를 사용하여 키 입력을 줄일 수 있습니다. ``` js diff --git a/docs/kr/guide/testing.md b/docs/kr/guide/testing.md index 27cc99fd6..64d9f5694 100644 --- a/docs/kr/guide/testing.md +++ b/docs/kr/guide/testing.md @@ -1,5 +1,7 @@ # 테스팅 + + Vuex에서 단위 테스트를 하고자 하는 주요 부분은 변이와 액션입니다. ### 변이 테스팅 diff --git a/docs/ptbr/README.md b/docs/ptbr/README.md index 32930a20b..f80f96de0 100644 --- a/docs/ptbr/README.md +++ b/docs/ptbr/README.md @@ -54,6 +54,8 @@ Além disso, definindo e separando os conceitos envolvidos no gerenciamento do e Esta é a ideia básica por trás do Vuex, inspirada por [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) e [The Elm Architecture](https://guide.elm-lang.org/architecture/). Ao contrário dos outros padrões, o Vuex também é uma implementação de biblioteca adaptada especificamente para o Vue.js tirar proveito de seu sistema de reatividade granular para atualizações eficientes. +Se você quiser aprender Vuex de um modo interativo, você pode conferir esse curso de [Vuex no Scrimba.](https://scrimba.com/g/gvuex) + ![vuex](/vuex.png) ### Quando usar o Vuex? diff --git a/docs/ptbr/guide/README.md b/docs/ptbr/guide/README.md index f9f56360a..388d93f02 100644 --- a/docs/ptbr/guide/README.md +++ b/docs/ptbr/guide/README.md @@ -1,5 +1,7 @@ # Começando + + No centro de cada aplicação Vuex existe o **_store_**. Um "_store_" é basicamente um recipiente que contém o **estado** da sua aplicação. Há duas coisas que tornam um _store_ Vuex diferente de um objeto global simples: 1. Os _stores_ Vuex são reativos. Quando os componentes do Vue obtêm o estado dele, eles atualizarão de forma reativa e eficiente se o estado do _store_ mudar. diff --git a/docs/ptbr/guide/actions.md b/docs/ptbr/guide/actions.md index 8a66eab85..506d4d84c 100644 --- a/docs/ptbr/guide/actions.md +++ b/docs/ptbr/guide/actions.md @@ -1,5 +1,7 @@ # Ações + + As ações são semelhantes às mutações, as diferenças são as seguintes: - Em vez de mudar o estado, as ações confirmam (ou fazem _commit_ de) mutações. diff --git a/docs/ptbr/guide/forms.md b/docs/ptbr/guide/forms.md index 0b1564324..14cd0d724 100644 --- a/docs/ptbr/guide/forms.md +++ b/docs/ptbr/guide/forms.md @@ -1,5 +1,7 @@ # Manipulação de Formulários + + Ao usar o Vuex no modo estrito, pode ser um pouco complicado usar `v-model` em um pedaço do estado que pertence ao Vuex: ``` html diff --git a/docs/ptbr/guide/getters.md b/docs/ptbr/guide/getters.md index b74b7f226..bc0922f4d 100644 --- a/docs/ptbr/guide/getters.md +++ b/docs/ptbr/guide/getters.md @@ -1,5 +1,7 @@ # Getters + + Às vezes, talvez precisemos calcular o estado derivado com base no estado do _store_, por exemplo, filtrar através de uma lista de itens e contá-los: ``` js diff --git a/docs/ptbr/guide/modules.md b/docs/ptbr/guide/modules.md index 54c3365f3..306c50c7f 100644 --- a/docs/ptbr/guide/modules.md +++ b/docs/ptbr/guide/modules.md @@ -1,5 +1,7 @@ # Módulos + + Devido ao uso de uma única árvore de estado, todo o estado de nossa aplicação está contido dentro de um grande objeto. No entanto, à medida que nosso aplicativo cresce em escala, o _store_ pode ficar realmente inchado. Para ajudar com isso, o Vuex nos permite dividir nosso _store_ em **módulos**. Cada módulo pode conter seu próprio estado, mutações, ações, _getters_ e até módulos aninhados - é todo o complexo caminho abaixo: diff --git a/docs/ptbr/guide/mutations.md b/docs/ptbr/guide/mutations.md index f2a5a5805..773f659ec 100644 --- a/docs/ptbr/guide/mutations.md +++ b/docs/ptbr/guide/mutations.md @@ -1,5 +1,7 @@ # Mutações + + A única maneira de realmente mudar de estado em um _store_ Vuex é por confirmar (ou fazer _commit_ de) uma mutação. As mutações do Vuex são muito semelhantes aos eventos: cada mutação tem uma cadeia de caracteres **tipo** e um **manipulador**. A função do manipulador é onde realizamos modificações de estado reais e ele receberá o estado como o 1º argumento: ``` js diff --git a/docs/ptbr/guide/plugins.md b/docs/ptbr/guide/plugins.md index 2e670a3ca..cc0f0fae4 100644 --- a/docs/ptbr/guide/plugins.md +++ b/docs/ptbr/guide/plugins.md @@ -1,5 +1,7 @@ # Plugins + + Os _stores_ do Vuex aceitam a opção _plugins_ que expõe _hooks_ para cada mutação. Um _plugin_ Vuex é simplesmente uma função que recebe um _store_ como seu único argumento: ``` js diff --git a/docs/ptbr/guide/state.md b/docs/ptbr/guide/state.md index 60a67750d..2f4ec24b3 100644 --- a/docs/ptbr/guide/state.md +++ b/docs/ptbr/guide/state.md @@ -2,6 +2,8 @@ ### Árvore Única de Estado + + O Vuex usa uma **árvore única de estado** - ou seja, esse único objeto contém todo o estado do seu nível de aplicação e serve como a "única fonte da verdade". Isso também significa que você terá apenas um _store_ para cada aplicativo. Uma árvore única de estado facilita a localização de uma parte específica do estado, e permite capturar facilmente momentos do estado atual do aplicativo para fins de depuração. A árvore única de estado não entra em conflito com a modularidade - em capítulos posteriores, discutiremos como dividir seu estado e mutações em sub-módulos. @@ -58,6 +60,8 @@ const Counter = { ### O Auxiliar `mapState` + + Quando um componente precisa fazer uso de várias propriedades do estado do _store_ ou _getters_, declarar todos esses dados computados pode ser repetitivo e verboso. Para lidar com isso, podemos usar o auxiliar `mapState` que gera funções _getter_ computadas para nós, economizando algumas linhas de código: ``` js diff --git a/docs/ptbr/guide/testing.md b/docs/ptbr/guide/testing.md index 38101e43e..ecffbcb0d 100644 --- a/docs/ptbr/guide/testing.md +++ b/docs/ptbr/guide/testing.md @@ -1,5 +1,7 @@ # Testando + + As partes principais que queremos testar no Vuex são mutações e ações. ### Testando Mutações diff --git a/docs/ru/README.md b/docs/ru/README.md index cdc6b6bdf..74406e0b3 100644 --- a/docs/ru/README.md +++ b/docs/ru/README.md @@ -54,6 +54,8 @@ new Vue({ Это основная идея Vuex, вдохновлённого [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) и [Архитектурой Elm](https://guide.elm-lang.org/architecture/). В отличие от других паттернов, Vuex реализован в виде библиотеки, специально предназначенной для Vue.js, чтобы использовать его систему реактивности для эффективного обновления. +Если хотите выучить Vuex интерактивным способом, попробуйте этот [курс по Vuex на Scrimba.](https://scrimba.com/g/gvuex) + ![vuex](/ru/vuex.png) ### Когда следует использовать Vuex? diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md index 68a98df75..a20c0acad 100644 --- a/docs/ru/guide/README.md +++ b/docs/ru/guide/README.md @@ -1,5 +1,7 @@ # Введение + + В центре любого Vuex-приложения находится **хранилище**. «Хранилище» — это контейнер, в котором хранится **состояние** вашего приложения. Два момента отличают хранилище Vuex от простого глобального объекта: 1. Хранилище Vuex реактивно. Когда компоненты Vue полагаются на его состояние, то они будут реактивно и эффективно обновляться, если состояние хранилища изменяется. diff --git a/docs/ru/guide/actions.md b/docs/ru/guide/actions.md index 42d0c4460..511c5ca45 100644 --- a/docs/ru/guide/actions.md +++ b/docs/ru/guide/actions.md @@ -1,5 +1,7 @@ # Действия + + Действия — похожи на мутации с несколькими отличиями: * Вместо того, чтобы напрямую менять состояние, действия инициируют мутации; diff --git a/docs/ru/guide/forms.md b/docs/ru/guide/forms.md index 0658f2b96..239c16ef2 100644 --- a/docs/ru/guide/forms.md +++ b/docs/ru/guide/forms.md @@ -1,5 +1,7 @@ # Работа с формами + + При использовании строгого режима Vuex может показаться неочевидным как использовать `v-model` с частью состояния Vuex: ```html diff --git a/docs/ru/guide/getters.md b/docs/ru/guide/getters.md index 9c9d1daed..e0f126ef0 100644 --- a/docs/ru/guide/getters.md +++ b/docs/ru/guide/getters.md @@ -1,5 +1,7 @@ # Геттеры + + Иногда может потребоваться вычислять производное состояние на основе состояния хранилища, например, отфильтровать список и затем подсчитать количество элементов: ```js diff --git a/docs/ru/guide/modules.md b/docs/ru/guide/modules.md index f080afc5a..70187bcc3 100644 --- a/docs/ru/guide/modules.md +++ b/docs/ru/guide/modules.md @@ -1,5 +1,7 @@ # Модули + + Из-за использования единого дерева состояния, все глобальные данные приложения оказываются помещены в один большой объект. По мере роста приложения, хранилище может существенно раздуться. Чтобы помочь в этой беде, Vuex позволяет разделять хранилище на **модули**. Каждый модуль может содержать собственное состояние, мутации, действия, геттеры и даже встроенные подмодули — структура фрактальна: diff --git a/docs/ru/guide/mutations.md b/docs/ru/guide/mutations.md index 7b1530a15..81033830a 100644 --- a/docs/ru/guide/mutations.md +++ b/docs/ru/guide/mutations.md @@ -1,5 +1,7 @@ # Мутации + + Единственным способом изменения состояния хранилища во Vuex являются мутации. Мутации во Vuex очень похожи на события: каждая мутация имеет строковый **тип** и **функцию-обработчик**. В этом обработчике и происходят, собственно, изменения состояния, переданного в функцию первым аргументом: ```js diff --git a/docs/ru/guide/plugins.md b/docs/ru/guide/plugins.md index 03f1cce64..b52b18c81 100644 --- a/docs/ru/guide/plugins.md +++ b/docs/ru/guide/plugins.md @@ -1,5 +1,7 @@ # Плагины + + Хранилища Vuex принимают опцию `plugins`, предоставляющую хуки для каждой мутации. Vuex-плагин — это просто функция, получающая хранилище в качестве единственного параметра: ```js diff --git a/docs/ru/guide/state.md b/docs/ru/guide/state.md index 274a7995d..462d66457 100644 --- a/docs/ru/guide/state.md +++ b/docs/ru/guide/state.md @@ -2,6 +2,8 @@ ### Единое дерево состояния + + Vuex использует **единое дерево состояния** — когда один объект содержит всё глобальное состояние приложения и служит «единственным источником истины». Это также означает, что в приложении будет только одно такое хранилище. Единое дерево состояния позволяет легко найти нужную его часть или делать снимки текущего состояния приложения в целях отладки. Единое дерево состояния не противоречит модульности — в следующих главах мы изучим, как можно разделить состояние и мутации на под-модули. @@ -58,6 +60,8 @@ const Counter = { ### Вспомогательная функция `mapState` + + Когда компонент должен использовать множество свойств или геттеров хранилища, объявлять все эти вычисляемые свойства может быть утомительно. В таких случаях можно использовать функцию `mapState`, которая автоматически генерирует вычисляемые свойства: ```js diff --git a/docs/ru/guide/testing.md b/docs/ru/guide/testing.md index 616c16ac2..bd77ea655 100644 --- a/docs/ru/guide/testing.md +++ b/docs/ru/guide/testing.md @@ -1,5 +1,7 @@ # Тестирование + + В основном предметом модульного тестирования во Vuex являются мутации и действия. ### Тестирование мутаций diff --git a/docs/zh/README.md b/docs/zh/README.md index bc0e73ba9..f02c70816 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -52,6 +52,8 @@ new Vue({ 这就是 Vuex 背后的基本思想,借鉴了 [Flux](https://facebook.github.io/flux/docs/overview.html)、[Redux](http://redux.js.org/)、和 [The Elm Architecture](https://guide.elm-lang.org/architecture/)。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。 +如果你想要以交互式的方式学习Vuex,快来看看在[Scrimba](https://scrimba.com/g/gvuex)上的这门Vuex课程。 + ![vuex](/vuex.png) ### 什么情况下我应该使用 Vuex? diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md index eab92199c..dfe4b7ae9 100644 --- a/docs/zh/guide/README.md +++ b/docs/zh/guide/README.md @@ -1,5 +1,7 @@ # 开始 + + 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的**状态 (state)**。Vuex 和单纯的全局对象有以下两点不同: 1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。 diff --git a/docs/zh/guide/actions.md b/docs/zh/guide/actions.md index d4ea1d8f2..a829af4d0 100644 --- a/docs/zh/guide/actions.md +++ b/docs/zh/guide/actions.md @@ -1,5 +1,7 @@ # Action + + Action 类似于 mutation,不同在于: - Action 提交的是 mutation,而不是直接变更状态。 diff --git a/docs/zh/guide/forms.md b/docs/zh/guide/forms.md index 99e7f041c..2d2dca19e 100644 --- a/docs/zh/guide/forms.md +++ b/docs/zh/guide/forms.md @@ -1,5 +1,7 @@ # 表单处理 + + 当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 `v-model` 会比较棘手: ``` html diff --git a/docs/zh/guide/getters.md b/docs/zh/guide/getters.md index b8e2f729f..6cfe163d8 100644 --- a/docs/zh/guide/getters.md +++ b/docs/zh/guide/getters.md @@ -1,5 +1,7 @@ # Getter + + 有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数: ``` js diff --git a/docs/zh/guide/modules.md b/docs/zh/guide/modules.md index c210d3c66..24fd0ee04 100644 --- a/docs/zh/guide/modules.md +++ b/docs/zh/guide/modules.md @@ -1,5 +1,7 @@ # Module + + 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 为了解决以上问题,Vuex 允许我们将 store 分割成**模块(module)**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割: diff --git a/docs/zh/guide/mutations.md b/docs/zh/guide/mutations.md index 76e8be330..25dccb5ac 100644 --- a/docs/zh/guide/mutations.md +++ b/docs/zh/guide/mutations.md @@ -1,5 +1,7 @@ # Mutation + + 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 **事件类型 (type)** 和 一个 **回调函数 (handler)**。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数: ``` js diff --git a/docs/zh/guide/plugins.md b/docs/zh/guide/plugins.md index 92c157c9c..a68134ec6 100644 --- a/docs/zh/guide/plugins.md +++ b/docs/zh/guide/plugins.md @@ -1,5 +1,7 @@ # 插件 + + Vuex 的 store 接受 `plugins` 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数: ``` js diff --git a/docs/zh/guide/state.md b/docs/zh/guide/state.md index 892773abb..40993b863 100644 --- a/docs/zh/guide/state.md +++ b/docs/zh/guide/state.md @@ -2,6 +2,8 @@ ### 单一状态树 + + Vuex 使用**单一状态树**——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ([SSOT](https://en.wikipedia.org/wiki/Single_source_of_truth))”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。 单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。 @@ -57,6 +59,8 @@ const Counter = { ### `mapState` 辅助函数 + + 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 `mapState` 辅助函数帮助我们生成计算属性,让你少按几次键: ``` js diff --git a/docs/zh/guide/testing.md b/docs/zh/guide/testing.md index b2cbc4579..ce511abba 100644 --- a/docs/zh/guide/testing.md +++ b/docs/zh/guide/testing.md @@ -1,5 +1,7 @@ # 测试 + + 我们主要想针对 Vuex 中的 mutation 和 action 进行单元测试。 ### 测试 Mutation From 48b01ecb7c78e87f584d52680abac493870de260 Mon Sep 17 00:00:00 2001 From: Per Harald Borgen Date: Wed, 20 Feb 2019 22:17:08 +0100 Subject: [PATCH 3/5] docs: added override.styl for Scrimba link styles --- docs/.vuepress/override.styl | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 docs/.vuepress/override.styl diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl new file mode 100644 index 000000000..0b633e8d6 --- /dev/null +++ b/docs/.vuepress/override.styl @@ -0,0 +1,31 @@ +.scrimba + background-color #e7ecf3 + padding 1em 1.25em + border-radius 2px + color #486491 + position relative + a + color #486491 !important + position relative + padding-left 36px + &:before + content '' + position absolute + display block + width 30px + height 30px + top -5px + left -4px + border-radius 50% + background-color #73abfe + &:after + content '' + position absolute + display block + width 0 + height 0 + top 5px + left 8px + border-top 5px solid transparent + border-bottom 5px solid transparent + border-left 8px solid #fff \ No newline at end of file From 17388f87fee4032a4c58bc682c94f33256ea1451 Mon Sep 17 00:00:00 2001 From: Per Harald Borgen Date: Thu, 21 Feb 2019 08:46:22 +0100 Subject: [PATCH 4/5] docs: added margin above Scrimba lessons --- docs/.vuepress/override.styl | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl index 0b633e8d6..7222c4be1 100644 --- a/docs/.vuepress/override.styl +++ b/docs/.vuepress/override.styl @@ -4,6 +4,7 @@ border-radius 2px color #486491 position relative + margin-top: 16px a color #486491 !important position relative From 319eef9b3dad3f66eb4975de89972504ae5e2c95 Mon Sep 17 00:00:00 2001 From: Per Harald Borgen Date: Thu, 21 Feb 2019 12:44:31 +0100 Subject: [PATCH 5/5] docs: adjust translation on russian README.md --- docs/ru/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/README.md b/docs/ru/README.md index 74406e0b3..d8523f05b 100644 --- a/docs/ru/README.md +++ b/docs/ru/README.md @@ -54,7 +54,7 @@ new Vue({ Это основная идея Vuex, вдохновлённого [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) и [Архитектурой Elm](https://guide.elm-lang.org/architecture/). В отличие от других паттернов, Vuex реализован в виде библиотеки, специально предназначенной для Vue.js, чтобы использовать его систему реактивности для эффективного обновления. -Если хотите выучить Vuex интерактивным способом, попробуйте этот [курс по Vuex на Scrimba.](https://scrimba.com/g/gvuex) +Если хотите изучить Vuex в интерактивном режиме, попробуйте этот [курс по Vuex на Scrimba.](https://scrimba.com/g/gvuex) ![vuex](/ru/vuex.png)