差分

このページの2つのバージョン間の差分を表示します。

--- 14.vue.jsのvuexで入力フォーム:index.html [2019/01/25] – [stateやgetterにv-modelを使用する] adash333
+++ 14.vue.jsのvuexで入力フォーム:index.html [2019/02/09] (現在) – [初めてのVuex目次] adash333
@@ 行 5: / 行 5: @@
 似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular（Ionic）というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。
-当初、[[https://luftgarden.work/tut-nuxt-dog-part1/|Nuxt.js で簡単な画像一覧アプリを作成する]]を写経して、画像一覧アプリを作成しようとしたのですが、vuexの部分がよく分からず、しかも実際に動くアプリを作成することができませんでした。Vue.jsアプリを作成していく上で、vuexは避けて通れない難関だと認識しておりますので、非常に簡単なサンプルコードの写経から、順番にやってみたいと思います。
+当初、[[https://luftgarden.work/tut-nuxt-dog-part1/|Nuxt.js で簡単な画像一覧アプリを作成する]]を写経して、画像一覧アプリを作成しようとしたのですが、vuexの部分がよく分からず、しかも実際に動くアプリを作成することができませんでした。Vue.jsアプリを作成していく上で、vuexは避けて通れない難関だと認識しました。そのため、非常に簡単なサンプルコードの写経から、順番にやってみたいと思います。
 また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。
@@ 行 11: / 行 11: @@
 <html>
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07D9BYHMZ&linkId=fa852410875e77ec8615969928dc1e59"></iframe>
-</html>
+</html>　<html>
-<html>
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4297100916&linkId=b04fa5ed8135a984b2f93e1dec372179"></iframe>
-</html>
+</html>　<html>
-<html>
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07J5434JB&linkId=a964b2ce4f94aa90014eff9207d831a7"></iframe>
 </html>
+===== 初めてのVuex目次 =====
+[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]
+[[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]]
+[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]
+[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]
+[[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]]
+[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]
@@ 行 32: / 行 46: @@
 ソースコード
+https://codesandbox.io/s/0409x6y00l
 Demo
+https://0409x6y00l.codesandbox.io/
 ===== 開発環境 =====
@@ 行 237: / 行 251: @@
 [[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]]のp268の通りにやればできそうですが、、、
-作成中。。。
-途中のコード
-https://codesandbox.io/s/z2zw54kmqx
 参考：https://vuetifyjs.com/ja/components/forms
@@ 行 289: / 行 296: @@
 そのため、ヘルパーというものが用意されているそうです。
+<code>
+import {
+  mapState,
+  mapGetters,
+  mapMutations,
+  mapActions
+} from 'vuex'
+</code>
+stateとgetterは算出プロパティcomputedに登録します。
+mutationとactionはメソッドmethodsに登録します。
+<code>
+computed: {
+  // ローカルの算出プロパティ
+  myProperty() { ... },
+  ...mapGetters([
+    // this.messageをstore.getters.messageにマッピング
+    'message'
+  ]),
+  // メソッド名を変更したい場合はオブジェクトで定義
+  ...mapGetters({
+    // this.messageAliasをstore.getters.messageにマッピング
+    messageAlias: 'message'
+  })
+}
+</code>
+カッコが、[]なのか、{}なのか、紛らわしいです。[]は配列、{}はオブジェクトなのだと思います。
+組み合わせる必要がなければ、以下のように、オプションに直接、登録することもできるとのことです。
+(しかし、これは汎用的ではないと思われます。)
+<code>
+computed: mapGetters(['message']),
+methods: mapActions(['add', 'update', 'remove'])
+</code>
+これは、次のメソッドでdispatchを使用できるようになるとのことです。
+<code>
+this.add('newItem!')
+// これは次のdispatchを使用したときと同じ
+this.$store.dispatch('add', 'newItem!')
+</code>
+という上記の解説を丸写ししてみましたが、実際、上記のコードを、どのようにmapGettersとmapActionsを使って変更したらよいのかは、残念ながらわかりませんでした。。。（爆）
@@ 行 358: / 行 404: @@
 ===== リンク =====
-目次：
+目次：[[:sidebar|目次]]
-前：
+前：[[13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html|13.Vue.jsとWeb Speech ApiとFirebaseで認証つきボイスレコーダー(簡易議事録)]]
-次：
+次：[[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]]