Nuxtでrouteに応じてVuex Storeをmodule分割する方法

Apr 19, 2018

まとめ

Nuxt は route に応じて自動で Vuex Store を module 分割できるが、あえて手動で registerModule することもできる
module 分割の際に大事なのは
- namespaced 設定
- state を function に
- registerModule はすでに存在する module を上書きしてしまう（壊れる）
Store は SSR での扱いに注意が必要。不要なら beforeMount() 以降のタイミングで初期化することでサーバサイドでは無視されるようにすることができる。

Vuex Storeのmodule分割の基本

基本的な Vuex Store の構造は

state: {
},
mutations: {
},
actions: {
}

となるが、これを以下のようにする。

{
  modules: {
    name: {
      state: {
      },
      mutations: {
      },
      actions: {
      }
    },
    name: {
      state: {
      },
      mutations: {
      },
      actions: {
      }
    }
  }
}

Nuxt.js では store/ 以下に page に対応する module 構造を置いてあげれば自動的に module として登録される。便利。

routeに同期させて同一構造のmoduleを手動でregisterする

手動 register

module 構造の Store を作る方法は上の構造の object をそのまま new Vuex.Store() に突っ込んでもよいのだが、動的に組むには store.registerModule(NAME, OBJECT) してあげるとよい。

Nuxt の場合は特に何の設定もしなくても各 component から this.$store で Vuex Store へアクセスできるので、

this.$store.registerModule(NAME, OBJECT)

になる。

同一構造の module を動的 register する際の注意点

namespaced: true を設定
state は function
module を registerModule するタイミングで state が消える
Vue の SSR が beforeCreate(), created() までしか Lifecycle Hook を利用できないので、beforeMount() 以降で初期化すると client side だけに集中できる

created() で registerModule 以外の $store 操作を行なっている場合は module 生成 1 については同一構造の state が複数あるとどれに対してアクセスしているのかを明示しつつそれぞれの影響範囲が閉じている必要がある。そのための namespaced.

2 については Vue component の data と同じ。インスタンスが複数登場する場合は plain object を使ってしまうと state がみんな同じになってしまう。

3 については分かってしまえばその通りなんだけど、route を手動で書かなくても自動的に設定してくれる Nuxt 環境では注意しないといけない点。

実際にどう対処するか、以下のコードをサンプルとして挙げておく。module name を route name と同一にすると仮定した場合はこのように意図せぬ Store の破壊を防ぎつつ構築していくとよい。

if ( typeof this.$store.state[this.$route.name] == 'undefined' ) {
  this.$store.registerModule(
    this.$route.name,
    {
      namespaced: true,
      state() {
        return {
        }
      },
      mutations: {
      },
      actions: {
      }
    }
  )
}

4 はしばらくハマった。Nuxt で Universal アプリを書くことにした場合、Vue の SSR の知識なしに始めると変なところでハマる可能性があるので注意が必要。

Singleton な Store を Universal アプリで利用するには root component が初期化される前に acyncData で行うのがスジらしい。

今回は Nuxt が最初から用意してくれている Page component に hook して registerModule しようという考えだったので、created() の後に registerModule することで SSR 時には無視されるようにした。

cf. データのプリフェッチと状態 · GitBook

※ なお、困ったことに vue-devtool では Store が破壊されたことは分からない。そこまで中の状態を細かく見ていないようだ。少なくとも v4.1.1 の段階では分からなかった。

どうでしょうClassic ヨーロッパリベンジ

Apr 19, 2007

最新作のすぐ後からヨーロッパリベンジが始まるわけです。放映スケジュールの問題なわけですけど。

いやぁこの頃のミスターは喋ってるなぁ。まだガンガン仕切ってるなぁ。

APOP 解読成功らしい

Apr 19, 2007

Security

APOP が破られたっていうニュースを小倉さんが話している。最初おーずいぶん勉強してるんだなぁと思ってたんだけど、単にニュース読んでただけなのね。

でーもー。

APOP はパスワード以外はだだ漏れ¹だし、SSL なんかの公開鍵暗号とは安全性のレベルが全然違うんだから、APOP のニュースだけでパスワードが破られた！って大騒ぎするのもどうだーと思ったりする²けど、本当にパスワードがバレると何がまずいかっていうと芋づるでいろんなサービスの内容が全部ぶっこ抜ける可能性が結構高いっていうところだったりするよね。ぱふ。（でんかちゃん風）

つか APOP って単なる MD5 でしたっけか。MD5 クラックが大騒ぎになってからもうそれなりに経ちましたなぁ。（遠い目）

有料で over SSL オプションを提供したらそれなりに喜ぶ(人|会社)いるかも。

[追記] APOP って POP サーバに「やぁ」って言った瞬間のタイムスタンプと共有鍵でダイジェストを作るのね。純粋にダイジェストしか情報がない状態からさかのぼれるものなのか？なんかもっと制約が厳しくなってるだろうと思うんだけどなぁ。

出てきた出てきた。

なるほどね。やっぱサーバ詐称しなきゃできんわな。

そういやいっとき FTP の認証だけ ssh portforward 経由にするのが流行ったな ↩
Web 上のサービスを利用する際のパスワードの話とごっちゃになってしまっている。 ↩

Thunderbird 1.5.0.2 も出る

Apr 19, 2006

Firefox を Firefox 自身の更新通知機能で初めてアップデートした今日この頃。

Thunderbird は is to be released ということになっているので直に出るんでしょう。確認した時点では Firefox 1.0.8 と Thunderbird の 1.5.0.2 の日本語版はミラーには届いてない模様。

「じきに」なんてのは絶対に忘れるので先日開発した簡易タイマーをセットする。何？簡易タイマーには何を使っているのかって？よろしい、そんなに聞きたいか。オープンソースの時代だものな。わっはっは。公開してやろう。

0 14  *  *  *  open -a /Applications/Stickies.app/Contents/MacOS/Stickies

cron でスティッキーズを立ち上げるだけ :-P 普段スティッキーズ使ってるとこの手は使えないけどね。自分の場合はメモは Wiki + QuickNote（Firefox Extension）なのでスティッキーズは遊んでいたのだ。Windows のタスクスケジューラと違って crontab -e って打ってコメントアウトしておいたスティッキーズの起動設定を日時調整して有効にするだけ。楽ちん。（Terminal は常に起きているっていう前提が必要だけど。）

<?php の次に class ...

Apr 19, 2005

BMediaNode: PHPプログラマの技量を知りたいとき

経由で元ネタを読んで、

zend.co.jpのページには「PHP 開発技術者のスキル証明書」なんて書かれていますが、最近のPHPプログラマなぞ「<?phpの次にclassと書くかどうか」だけでだいぶ足切りできる気がする。逆に言えば、Zend PHP Certification持ってたって関数型プログラミング一直線な人はゴロゴロいるでしょうし。

ちなみに私がPHPプログラマの技量を知りたい時には、ファイル数・構成は無制限で以下のような仕様のスクリプトを書いてもらいます。

いきなり class なんか書くかなぁ？ phpdoc のコメント書くよね:-)

まぁ OOP が分からない人を弾くことはできるかもしれないけど、ishinao さんも書いているようにそれに適した題材ではないような？「PEAR のこれを使うかどうかを見てる」とかいう裏試験なのかもしれないし、基本的な正規表現が分かっているかどうかも見ているのかもしれないけど。むしろこの手の内容を短時間で作ることは関数一直線で渡り歩いてる人の方が強い気がする。

問題はそういう作りのスクリプトがどうしようもなく手の入れにくいものになってしまうってことじゃないのかな？その辺は見極めなくていいんだろか。ま、直さなくていいならそれに越したことはないんですが。