From 1ff6a24db9c619f6736c921df60e13127cf9ddae Mon Sep 17 00:00:00 2001 From: dollinad <39140769+dollinad@users.noreply.github.com> Date: Sat, 16 Mar 2019 14:06:21 -0700 Subject: [PATCH 1/4] Fix minor errors in README.md Changes involve: - Removal of dead links: data flow.png and vuex.png - Removal of discourse markers (although, also, in addition) to make sentences precise --- docs/README.md | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/docs/README.md b/docs/README.md index 67283092e..233d530c2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -31,17 +31,13 @@ new Vue({ It is a self-contained app with the following parts: -- The **state**, which is the source of truth that drives our app; -- The **view**, which is just a declarative mapping of the **state**; -- The **actions**, which are the possible ways the state could change in reaction to user inputs from the **view**. +- The **state**, the source of truth that drives our app; +- The **view**, a declarative mapping of the **state**; +- The **actions**, the possible ways the state could change in reaction to user inputs from the **view**. -This is an extremely simple representation of the concept of "one-way data flow": +This is an simple representation of the concept of "one-way data flow": -

- -

- -However, the simplicity quickly breaks down when we have **multiple components that share common state**: +However, the simplicity quickly breaks down when we have **multiple components that share a common state**: - Multiple views may depend on the same piece of state. - Actions from different views may need to mutate the same piece of state. @@ -50,17 +46,15 @@ For problem one, passing props can be tedious for deeply nested components, and So why don't we extract the shared state out of the components, and manage it in a global singleton? With this, our component tree becomes a big "view", and any component can access the state or trigger actions, no matter where they are in the tree! -In addition, by defining and separating the concepts involved in state management and enforcing certain rules, we also give our code more structure and maintainability. +By defining and separating the concepts involved in state management and enforcing rules that maintain independece between views and states, we give our code more structure and maintainability. 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? -Although Vuex helps us deal with shared state management, it also comes with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. +Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple [store pattern](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux: From d1b2cb79743696b739f2f4591366baa5eaf73540 Mon Sep 17 00:00:00 2001 From: dollinad <39140769+dollinad@users.noreply.github.com> Date: Sat, 16 Mar 2019 19:10:45 -0700 Subject: [PATCH 2/4] Updated Edits Re-added link for Vuex --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 233d530c2..4cdd5c891 100644 --- a/docs/README.md +++ b/docs/README.md @@ -54,7 +54,7 @@ If you want to learn Vuex in an interactive way you can check out this [Vuex cou ### When Should I Use It? -Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. +[Vuex](https://vuex.vuejs.org/) helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple [store pattern](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux: From d0727249442334f2e3a84431f651688bc24c8e41 Mon Sep 17 00:00:00 2001 From: dollinad <39140769+dollinad@users.noreply.github.com> Date: Sat, 16 Mar 2019 19:28:08 -0700 Subject: [PATCH 3/4] Update edits1 Readded flow.png and veux.png --- docs/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/README.md b/docs/README.md index 4cdd5c891..1e1365760 100644 --- a/docs/README.md +++ b/docs/README.md @@ -37,6 +37,10 @@ It is a self-contained app with the following parts: This is an simple representation of the concept of "one-way data flow": +

+ +

+ However, the simplicity quickly breaks down when we have **multiple components that share a common state**: - Multiple views may depend on the same piece of state. @@ -48,6 +52,8 @@ So why don't we extract the shared state out of the components, and manage it in By defining and separating the concepts involved in state management and enforcing rules that maintain independece between views and states, we give our code more structure and maintainability. +![vuex](/vuex.png) + 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. From 683579c1c7b699e69dee063b935ef4e7ca7453f8 Mon Sep 17 00:00:00 2001 From: ktsn Date: Sun, 17 Mar 2019 12:40:47 +0800 Subject: [PATCH 4/4] docs: tweaks --- docs/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index 1e1365760..905874b95 100644 --- a/docs/README.md +++ b/docs/README.md @@ -52,15 +52,15 @@ So why don't we extract the shared state out of the components, and manage it in By defining and separating the concepts involved in state management and enforcing rules that maintain independece between views and states, we give our code more structure and maintainability. -![vuex](/vuex.png) - 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? -[Vuex](https://vuex.vuejs.org/) helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. +Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple [store pattern](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux: