2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いません。 実際のコードの書き方にも触れません。 Vuexを使ってはいるけど理解できなくて苦しんでいる方向けの内容です。 なぜVuexを使うのか Vuexの図解に入る前に、私がVuexを使っている理由を説明しておきます。 Vuexのメリットが明確でないと図があっ
![Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/adca62db1e29d18e9dc479c293d2075b88446a18/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJTIwJTJCJTIwVnVleCVFMyU4MSVBNyVFMyU4MyU4NyVFMyU4MyVCQyVFMyU4MiVCRiVFMyU4MSU4QyVFNSVCRSVBQSVFNyU5MiVCMCVFMyU4MSU5OSVFMyU4MiU4QiVFNSU4NSVBOCVFNCVCRCU5MyVFNSU4MyU4RiVFMyU4MiU5MiVFNSU5QiVCMyVFOCVBNyVBMyVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzFhNDNkNWIzMjNmZTEyNzk3YzhiN2FiNWJhZjE3NGI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtX21pdHN1aGlkZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDIyNjAwZGUxMTU4ODA4YzZlOWNhZjM0M2ZlZDJjN2I%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db6be8b683e7f15097b823bd64bb01344)