Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、 この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。 ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、 引っかかって躓いてしまう人にとっては大変な部分だと思うので、 コードのどことどこに関連があるのか図解してみようと思います。 まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、 私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。 しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。 実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。 サンプルコード コンポーネントとストアのサンプルコードは下記になります。 <template> <div i
![vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/09256ea9327e19fba22c39ddde7947d6621fa317/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9dnVleCVFMyU4MiU5MiVFMyU4MSVCRSVFMyU4MSVBMCVFNyU5MCU4NiVFOCVBNyVBMyVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSU4NCVFMyU4MSVBQSVFMyU4MSU4NCVFNSU4NSVBOCVFNCVCQSVCQSVFOSVBMSU5RSVFMyU4MSVBQiVFNiU4RCVBNyVFMyU4MSU5MHZ1ZXglRTMlODIlOTIlRTUlODglQTklRTclOTQlQTglRTMlODElOTclRTMlODElOUYlRTMlODIlQjMlRTMlODMlQkMlRTMlODMlODklRTMlODElQUUlRTUlOUIlQjMlRTglQTclQTMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWI3MWI4MmE4YTI0ODYxMjUwN2Q5NjgyOWYxYTg4OGJl%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZnJ1aXRyaWluJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03ZTBhMGIwM2YzZjAxYmEyOGYwNWJlYTA4YWM4ZjY2MQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3cecee0c52e6bba282397f8f8c58b085)