From 3d3a4f410fb78a95549ea1f4d0d7082b565b6ef8 Mon Sep 17 00:00:00 2001 From: An Phan Date: Tue, 12 May 2020 19:58:07 +0200 Subject: [PATCH 1/6] migrate: state management --- src/.vuepress/config.js | 5 +- src/.vuepress/public/images/state.png | Bin 0 -> 12926 bytes src/guide/accessibility.md | 2 + src/guide/state-management.md | 90 ++++++++++++++++++++++++++ 4 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 src/.vuepress/public/images/state.png create mode 100644 src/guide/state-management.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index c41f660c0f..7b5d291c92 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -51,7 +51,10 @@ const sidebar = { { title: 'Scaling Up', collapsable: false, - children: ['/guide/routing'] + children: [ + '/guide/routing', + '/guide/state-management' + ] }, { title: 'Migration to Vue 3', diff --git a/src/.vuepress/public/images/state.png b/src/.vuepress/public/images/state.png new file mode 100644 index 0000000000000000000000000000000000000000..14dc0516570c8189b837c4992b25077dc9c6a6de GIT binary patch literal 12926 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 Hu_6Bh+MfMp literal 0 HcmV?d00001 diff --git a/src/guide/accessibility.md b/src/guide/accessibility.md index c28336292c..91dd6a23e3 100644 --- a/src/guide/accessibility.md +++ b/src/guide/accessibility.md @@ -1,3 +1,5 @@ +# Accessiblity + An accessible website is a website that can be used by anyone — be that a person with a disability, someone on a slow connection, or someone whose hardware is dated or broken. It's easy to make a website assuming that all our users are using a keyboard, mouse, and screen, and have a way of hearing the sound produced by our websites, but that often isn't true: millions of people around the world have disabilities and are unable to use all the functionality of a computer in the same way most developers do. While many people with permanent disabilities might have tooling to help them, they're also relying on the people building the websites to make them accessible and work well with the tooling. diff --git a/src/guide/state-management.md b/src/guide/state-management.md new file mode 100644 index 0000000000..1acbed1fd8 --- /dev/null +++ b/src/guide/state-management.md @@ -0,0 +1,90 @@ +# State Management + +## Official Flux-Like Implementation + +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). + + +
Watch a video explanation on Vue Mastery
+ +### Information for React Developers + +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. + +## Simple State Management from Scratch + +It is often overlooked that the source of truth in Vue applications is the raw `data` object - a Vue instance only proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can share it by identity: + +``` js +const sourceOfTruth = { + message: 'Hello' +} + +const appA = Vue.createApp({ + data: () => sourceOfTruth +}).mount('#appA') + +const appB = Vue.createApp({ + data: () => sourceOfTruth +}).mount('#appB') +``` + +Now whenever `sourceOfTruth` is mutated, both `appA` and `appB` will update their views automatically. Subcomponents within each of these instances would also have access via `this.$root.$data`. 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. + +To help solve this problem, we can adopt a **store pattern**: + +``` js +const store = { + debug: true, + + state: { + message: 'Hello!' + }, + + setMessageAction (newValue) { + if (this.debug) { + console.log('setMessageAction triggered with', newValue) + } + + this.state.message = newValue + }, + + clearMessageAction () { + if (this.debug) { + console.log('clearMessageAction triggered') + } + + 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. + +In addition, each instance/component can still own and manage its own private state: + +``` js +const appA = Vue.createApp({ + data: () => ({ + privateState: {}, + sharedState: store.state + }) +}).mount('#appA') + +const appB = Vue.createApp({ + data: () => ({ + privateState: {}, + sharedState: store.state + }) +}).mount('#appB') +``` + +![State Management](/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. +::: + +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. + +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! From acb852f237dd3401badabc2247c6d64b684d5a00 Mon Sep 17 00:00:00 2001 From: Phan An Date: Tue, 12 May 2020 20:12:59 +0200 Subject: [PATCH 2/6] Update src/guide/state-management.md Co-authored-by: Natalia Tepluhina --- src/guide/state-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/state-management.md b/src/guide/state-management.md index 1acbed1fd8..c7e81ec968 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -22,7 +22,7 @@ const sourceOfTruth = { const appA = Vue.createApp({ data: () => sourceOfTruth -}).mount('#appA') +}).mount('#app-a') const appB = Vue.createApp({ data: () => sourceOfTruth From 3415612c4008e62fcd79bc8a7bc88d0c2430a255 Mon Sep 17 00:00:00 2001 From: Phan An Date: Tue, 12 May 2020 20:13:08 +0200 Subject: [PATCH 3/6] Update src/guide/state-management.md Co-authored-by: Natalia Tepluhina --- src/guide/state-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/state-management.md b/src/guide/state-management.md index c7e81ec968..35067a5cb5 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -26,7 +26,7 @@ const appA = Vue.createApp({ const appB = Vue.createApp({ data: () => sourceOfTruth -}).mount('#appB') +}).mount('#app-b') ``` Now whenever `sourceOfTruth` is mutated, both `appA` and `appB` will update their views automatically. Subcomponents within each of these instances would also have access via `this.$root.$data`. 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. From e513151aed94ae78c276ee29129d744bcb6873f9 Mon Sep 17 00:00:00 2001 From: Phan An Date: Tue, 12 May 2020 20:13:16 +0200 Subject: [PATCH 4/6] Update src/guide/state-management.md Co-authored-by: Natalia Tepluhina --- src/guide/state-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/state-management.md b/src/guide/state-management.md index 35067a5cb5..c69c0977b8 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -69,7 +69,7 @@ const appA = Vue.createApp({ privateState: {}, sharedState: store.state }) -}).mount('#appA') +}).mount('#app-a') const appB = Vue.createApp({ data: () => ({ From 9e23bc189e88a6f7185ac85db4d97c243a4e2313 Mon Sep 17 00:00:00 2001 From: Phan An Date: Tue, 12 May 2020 20:13:23 +0200 Subject: [PATCH 5/6] Update src/guide/state-management.md Co-authored-by: Natalia Tepluhina --- src/guide/state-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/state-management.md b/src/guide/state-management.md index c69c0977b8..1e409fe752 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -76,7 +76,7 @@ const appB = Vue.createApp({ privateState: {}, sharedState: store.state }) -}).mount('#appB') +}).mount('#app-b') ``` ![State Management](/images/state.png) From 17a198182da0807196466fd19611dc8e50ba4e21 Mon Sep 17 00:00:00 2001 From: An Phan Date: Tue, 12 May 2020 20:16:52 +0200 Subject: [PATCH 6/6] use function () for data --- src/guide/state-management.md | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/guide/state-management.md b/src/guide/state-management.md index 1e409fe752..ceac0866b3 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -21,11 +21,15 @@ const sourceOfTruth = { } const appA = Vue.createApp({ - data: () => sourceOfTruth + data () { + return sourceOfTruth + } }).mount('#app-a') const appB = Vue.createApp({ - data: () => sourceOfTruth + data () { + return sourceOfTruth + } }).mount('#app-b') ``` @@ -65,17 +69,21 @@ In addition, each instance/component can still own and manage its own private st ``` js const appA = Vue.createApp({ - data: () => ({ - privateState: {}, - sharedState: store.state - }) + data () { + return { + privateState: {}, + sharedState: store.state + } + } }).mount('#app-a') const appB = Vue.createApp({ - data: () => ({ - privateState: {}, - sharedState: store.state - }) + data () { + return { + privateState: {}, + sharedState: store.state + } + } }).mount('#app-b') ```