14.vue.jsのvuexで入力フォーム:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
14.vue.jsのvuexで入力フォーム:index.html [2019/01/21] – [src/components/EditForm.vueの編集] adash333 | 14.vue.jsのvuexで入力フォーム:index.html [2019/02/09] (現在) – [初めてのVuex目次] adash333 | ||
---|---|---|---|
行 5: | 行 5: | ||
似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular(Ionic)というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 | 似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular(Ionic)というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 | ||
- | 当初、[[https:// | + | 当初、[[https:// |
また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。 | また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。 | ||
行 11: | 行 11: | ||
< | < | ||
<iframe style=" | <iframe style=" | ||
- | </ | + | </ |
- | + | ||
- | < | + | |
<iframe style=" | <iframe style=" | ||
- | </ | + | </ |
- | + | ||
- | < | + | |
<iframe style=" | <iframe style=" | ||
</ | </ | ||
+ | |||
+ | ===== 初めてのVuex目次 ===== | ||
+ | [[14.vue.jsのvuexで入力フォーム: | ||
+ | |||
+ | [[15.vue.jsのvuexでカウンター: | ||
+ | |||
+ | [[16.vue.jsのvuexでパスワード制限: | ||
+ | |||
+ | [[17.nuxt.jsのvuexでパスワード制限: | ||
+ | |||
+ | [[18.nuxt.jsとbulmaでハンバーガーメニュー: | ||
+ | |||
+ | [[19.nuxt.jsで画像一覧アプリ: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 28: | 行 42: | ||
今回は、https:// | 今回は、https:// | ||
- | という本が元ネタですと記載してありますが、この本はVue.js初めての方(javascriptフレームワーク初めての方にも)非常にお勧めです。 | + | という本が元ネタですと記載してありますが、この本はVue.js初めての方に(javascriptフレームワーク初めての方にも)非常にお勧めです。 |
ソースコード | ソースコード | ||
+ | https:// | ||
Demo | Demo | ||
+ | https:// | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 238: | 行 252: | ||
[[https:// | [[https:// | ||
- | 作成中。。。 | + | 参考:https:// |
- | 途中のコード | + | ===== stateやgetterにv-modelを使用する ===== |
- | https://codesandbox.io/s/z2zw54kmqx | + | [[https://amzn.to/2CJPlCR|基礎から学ぶ Vue.js]]のp268を写経してみます。 |
+ | |||
+ | *stateはmutation以外からは書き換えていけない。 | ||
+ | *getterもセッター機能がついていないため、入力はできない。 | ||
+ | *v-modelを使用すると、自動的に値を書き換えようとするため、エラーになってしまう | ||
+ | |||
+ | →算出プロパティ(computed)のセッターを用いると、うまくいくらしいです。 | ||
+ | |||
+ | < | ||
+ | // < | ||
+ | < | ||
+ | |||
+ | // < | ||
+ | message: { | ||
+ | get() { | ||
+ | return this.$store.getters.message; | ||
+ | }, | ||
+ | set(value) { | ||
+ | this.$store.dispatch(" | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | src/App.vue (変更後) | ||
+ | {{: | ||
+ | |||
+ | うまくいっているようです。 | ||
+ | |||
+ | ===== componentとstoreをバインドするヘルパー ===== | ||
+ | getterやmutationを複数使用するとき、算出プロパティcomputedやmethodsにすべてを記述するのは冗長となってしまいます。 | ||
+ | そのため、ヘルパーというものが用意されているそうです。 | ||
+ | |||
+ | < | ||
+ | import { | ||
+ | mapState, | ||
+ | mapGetters, | ||
+ | mapMutations, | ||
+ | mapActions | ||
+ | } from ' | ||
+ | </ | ||
+ | |||
+ | stateとgetterは算出プロパティcomputedに登録します。 | ||
+ | mutationとactionはメソッドmethodsに登録します。 | ||
+ | |||
+ | < | ||
+ | computed: { | ||
+ | // ローカルの算出プロパティ | ||
+ | myProperty() { ... }, | ||
+ | ...mapGetters([ | ||
+ | // this.messageをstore.getters.messageにマッピング | ||
+ | ' | ||
+ | ]), | ||
+ | // メソッド名を変更したい場合はオブジェクトで定義 | ||
+ | ...mapGetters({ | ||
+ | // this.messageAliasをstore.getters.messageにマッピング | ||
+ | messageAlias: | ||
+ | }) | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | カッコが、[]なのか、{}なのか、紛らわしいです。[]は配列、{}はオブジェクトなのだと思います。 | ||
+ | |||
+ | 組み合わせる必要がなければ、以下のように、オプションに直接、登録することもできるとのことです。 | ||
+ | (しかし、これは汎用的ではないと思われます。) | ||
+ | < | ||
+ | computed: mapGetters([' | ||
+ | methods: mapActions([' | ||
+ | </ | ||
+ | |||
+ | これは、次のメソッドでdispatchを使用できるようになるとのことです。 | ||
+ | < | ||
+ | this.add(' | ||
+ | // これは次のdispatchを使用したときと同じ | ||
+ | this.$store.dispatch(' | ||
+ | </code> | ||
+ | |||
+ | という上記の解説を丸写ししてみましたが、実際、上記のコードを、どのようにmapGettersとmapActionsを使って変更したらよいのかは、残念ながらわかりませんでした。。。(爆) | ||
- | 参考:https:// | ||
===== vuex大まかなイメージと入力フォーム作成についてのリンク ===== | ===== vuex大まかなイメージと入力フォーム作成についてのリンク ===== | ||
行 284: | 行 381: | ||
Vue.jsとVuexでTodoListを作ってみた | Vue.jsとVuexでTodoListを作ってみた | ||
→ToDoアプリ(create, | →ToDoアプリ(create, | ||
+ | |||
+ | ===== mapStateとスプレッド演算子『...』に関するリンク ===== | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | @Statham | ||
+ | 2018年12月23日に更新 | ||
+ | Vuex: mapStateの使い方を理解する | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 289: | 行 404: | ||
===== リンク ===== | ===== リンク ===== | ||
- | 目次: | + | 目次:[[: |
- | 前: | + | 前:[[13.vue.jsとfirebaseで認証つきボイスレコーダー: |
- | 次: | + | 次:[[15.vue.jsのvuexでカウンター: |
14.vue.jsのvuexで入力フォーム/index.html.txt · 最終更新: 2019/02/09 by adash333