loading...

Nuxtはこう書け!リスト

ryunishimura profile image Ryu Nishimura ・1 min read

更新していくよ

書き方編

  • importパスは@を使いなさい
  • spaモードでは、aタグで遷移するな=>nuxt-link(to="/")を使え
  • process.env経由で環境変数を使うな

機能別編

  • 認証機能 => Firebase Authentication
  • 簡単なデータ管理 => Firestore
  • 決済機能 => Stripe
  • 多言語対応 => i18n
  • 状態管理 => Vuex
  • ラムダ => Netlify Functions, Cloud Functions

状態管理

状態管理は、非常に重要なプロセスです。

どんなデータが、どのように変更されるのか理路整然と認識されることを望みます。

特徴

  • 単方向データフロー アプリケーションの状態を一方方向で変更していくこと

データの流れ

①VueComponentからVuexで定義されたActionを呼び出す(Dispatch)
②DispacthされたActionの中でサーバ側にリクエストを投げる(自分の場合Firebase)
③サーバ側から返却された値を元にMutationを呼び出す(Mutate)
④Mutationの中でstate(状態)を変更する
⑤GetterでVueComponent内にrenderする

※(1)Actionは必ず非同期処理
※(2)サーバを経由しないActionもある
※(3)ActionによるMutateを待ちたい場合は、Loading stateを導入する

Discussion

pic
Editor guide