|
@@ -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":
|
|
This is an simple representation of the concept of "one-way data flow":
|
|
|
|
|
|
|
|
|
|
+<p style="text-align: center; margin: 2em">
|
|
|
|
|
+ <img style="width:100%;max-width:450px;" src="/flow.png">
|
|
|
|
|
+</p>
|
|
|
|
|
+
|
|
|
However, the simplicity quickly breaks down when we have **multiple components that share a 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.
|
|
- 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.
|
|
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.
|
|
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.
|
|
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.
|
dollinad