サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


14.vue.jsのvuexで入力フォーム:index.html


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
14.vue.jsのvuexで入力フォーム:index.html [2019/01/21]
adash333 [すること]
14.vue.jsのvuexで入力フォーム:index.html [2019/02/09] (現在)
adash333 [初めてのVuex目次]
行 5: 行 5:
 似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular(Ionic)というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 似たようなものに、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つの本を繰り返し読み、出来る限り写経しました。 また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。
行 11: 行 11:
 <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=B07D9BYHMZ&linkId=fa852410875e77ec8615969928dc1e59"></iframe> <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> <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> <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> </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 Demo
 +https://0409x6y00l.codesandbox.io/
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 238: 行 252:
 [[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]]のp268の通りにやればできそうですが、、、 [[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]]のp268の通りにやればできそうですが、、、
  
-作成中。。。+参考:https://vuetifyjs.com/ja/components/forms
  
-途中のコード+===== stateやgetterにv-modelを使用する =====
  
-https://codesandbox.io/s/z2zw54kmqx+[[https://amzn.to/2CJPlCR|基礎から学ぶ Vue.js]]のp268を写経してみます。 
 + 
 +  *stateはmutation以外からは書き換えていけない。 
 +  *getterもセッター機能がついていないため、入力はできない。 
 +  *v-modelを使用すると、自動的に値を書き換えようとするため、エラーになってしまう 
 + 
 +→算出プロパティ(computed)のセッターを用いると、うまくいくらしいです。 
 + 
 +<code> 
 +// <template>の中の一部 
 +<v-text-field v-model="message" label="以下に入力" required></v-text-field> 
 + 
 +// <script>の中の一部 
 +    message: { 
 +      get() { 
 +        return this.$store.getters.message; 
 +      }, 
 +      set(value) { 
 +        this.$store.dispatch("doUpdate", value); 
 +      } 
 +    } 
 +</code> 
 + 
 +src/components/EditForm.vue 
 + 
 +(変更前) 
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190125-050402.png}} 
 + 
 +(変更後) 
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190125-052126.png}} 
 + 
 +src/App.vue (変更後) 
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190125-052233.png}} 
 + 
 +うまくいっているようです。 
 + 
 +===== componentとstoreをバインドするヘルパー ===== 
 +getterやmutationを複数使用するとき、算出プロパティcomputedやmethodsにすべてを記述するのは冗長となってしまいます。 
 +そのため、ヘルパーというものが用意されているそうです。 
 + 
 +<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を使って変更したらよいのかは、残念ながらわかりませんでした。。。(爆)
  
  
-参考:https://vuetifyjs.com/ja/components/forms 
  
 ===== vuex大まかなイメージと入力フォーム作成についてのリンク ===== ===== vuex大まかなイメージと入力フォーム作成についてのリンク =====
行 284: 行 381:
 Vue.jsとVuexでTodoListを作ってみた Vue.jsとVuexでTodoListを作ってみた
 →ToDoアプリ(create, updateのみ)をindex.htmlの1ファイルのみで作成します。https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42cに、コンポーネント化したコードが解説されています。 →ToDoアプリ(create, updateのみ)をindex.htmlの1ファイルのみで作成します。https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42cに、コンポーネント化したコードが解説されています。
 +
 +===== mapStateとスプレッド演算子『...』に関するリンク =====
 +
 +
 +
 +
 +
 +https://qiita.com/Statham/items/046649bff81c00ba275e
 +@Statham
 +2018年12月23日に更新
 +Vuex: mapStateの使い方を理解する
 +
 +
 +
 +
 +
 +
 +
  
  
行 289: 行 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でカウンター]]
  


14.vue.jsのvuexで入力フォーム/index.html.1548099559.txt.gz · 最終更新: 2019/01/21 by adash333