vuex-module-decorators

Vuexの使い方

Vue.js でのデータの受け渡しについて、色々と調べている。

それプラス、TypeScript を用いたときに、綺麗な書き方、についても。

まず、「vuex typescript」でググる

TypeScriptでVuexを使うときのスタンダードっぽいやりかたを調べてみた

ググると、こちらの記事が上位に出てきますね。
とくに、「vuex」以外のライブラリは使っていないように見えます。

RootStateとか、ActionTreeとかの説明がないので、そのあたりは調べなければならない。

---

vuex + typescriptをvuex-module-decoratorsで無敵になる

次に出てくるのが、こちらの記事ですね。
このときは、「vuex-module-decorators ってなんのこっちゃっ？」てことで、記事をあまり読み込みませんでした。

結局、今は、vuex-module-decorators を採用しています。

---

これら２つの記事を見ても、いまいちピントこなかった「Vuex + TypeScript」です。そこで、次に出てきたのが、「vue-class-component」。

vuex-class-component

vuex-class-componentを使ってVuexをクラススタイルでタイプセーフに書いてみよう

こういった記事を見つけ、なんか使いやすそうだな、と。

GitHub（vuex-class-component）をみても、とても分かりやすく解説されている。こいつで決まりかなー、と思ったところで、ドキュメントを読んでいてひっかかったのが、「nuxt」という文字。

nuxtというと、「Nuxt.js」ですよね。
Vue.jsのフレームワークと認識していますが、今回は、Nuxt.jsまで習得する時間がありません。「Vue.js + TS」が限界です。

そして、Nuxt.js のVuex ストアの項を見ると、また別のお作法が書いてある。どれがスタンダードなやり方なのか分からん（動けばいいんだろうけれど、あとからメンテしやすいものが良い）。

vuex-module-decorators

ただ、ここがきっかけで、「Nuxt.js+ TypeScript」というページを見つける。そこのストアの項を見ると、先に出てきた「vuex-module-decorators」が丁寧に解説されている。

最も人気のあるアプローチの1つは vuex-module-decorators です

https://typescript.nuxtjs.org/ja/cookbook/store.html#vuex-module-decorators

最も人気があるのかー、と思いながら、下まで読むと、vuex-class-componentも取り上げている。が、あまりポジティブではなさそうだ。

vuex-class-component は Nuxt ストアに対する非常に有望なクラスベースのアプローチであり、シンタックスは vuex-module-decorators にとても似ています。新しい API をリリースしましたが、Nuxt との互換性は完全ではありません。回避策はデコレーターでモジュールを定義することです。

https://typescript.nuxtjs.org/ja/cookbook/store.html#vuex-class-component

最後にヴァニラでのお作法が書いてあるが、ヴァニラでコーディングする気はないので、パス。

で、「vuex-module-decorators」ですが、こいつの公式リファレンスが非常に分かりやすい。

GitHub（公式）のREADMEすらも分かりやすい。

とりあえず、「vuex-module-decorators」を使ったコーディングをしてみようと思います。

---

Vuexについて、まだ「コレ！」というスタンダードなやり方が記された書籍が出版されていない中、後からもコーディングが続けられるような（持続可能なプログラム・・・）コードにするために、どのようにすればよいのか、それを探るのに大変な時間を使ってしまった。

「Vuexを使ったデータ保存」だけなら、すぐ実装できるだろう。色々なやり方が、色々な書籍に書いてある。

が、時間を置いて（空けて）再びコードをみたときにも、なるべく、

・分かりやすい
・新しい目的に応じて、修正しやすい

コードにしたい（当然ながら）。
付け焼き刃的な、「そのときだけ動けば、それでいい」的なものに、今回はしたくない。

コロナウイルス対策のため、不要不急な外出を控えなければならない状況が続くため、週末も引きこもることでしょう。「vuex-module-decorator」を取り入れることで、少しでも開発が前進すれば良いのですが（しなければならない・・・）。

シンゴウガ
アオニナリマシタ
オウダンシテクダサイ

これは、歩行者用の信号機。
下にスピーカーがついているところに注目。
こういったものが、おそらくユニバーサルデザイン（合っているかな？）。

この声（音）がどこから流れているのか、考えたことがなかったが、信号機のすぐ下に、スピーカーがあるとは知らなかった。

スピーカーの向き的には、対向車線側で信号待ちをしている人にアナウンスする形なのかな。信号機の近くにいる人だったら、もうちょっと下向きにするんじゃないかな。

いや、写真を撮ったときはあまり考えなかったけれど、この信号機は、歩道の奥に設置されていた気もするね。だったら、信号機の前に横断歩道を渡る人が並んでいる・・・という形なのかな。

それに、対向車線まで聞こえるような、大きな音量で流すと、本来聞こえてはいけない人（赤信号で止まっている人）にも聞こえてしまうよね。事故を防ぐためにも、音が聞こえる範囲はピンポイントじゃないといけないよねー。

・・・などと、全く関係ないことも考えていました。

---