14.vue.jsのvuexで入力フォーム:index.html
差分
このページの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というものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 | 似たようなものに、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で画像一覧アプリ: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 32: | 行 46: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
Demo | Demo | ||
+ | https:// | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 237: | 行 251: | ||
[[https:// | [[https:// | ||
- | |||
- | 作成中。。。 | ||
- | |||
- | 途中のコード | ||
- | |||
- | https:// | ||
- | |||
参考:https:// | 参考:https:// | ||
行 249: | 行 256: | ||
===== stateやgetterにv-modelを使用する ===== | ===== stateやgetterにv-modelを使用する ===== | ||
- | [[https:// | + | [[https:// |
*stateはmutation以外からは書き換えていけない。 | *stateはmutation以外からは書き換えていけない。 | ||
行 283: | 行 290: | ||
{{: | {{: | ||
+ | うまくいっているようです。 | ||
+ | ===== 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(' | ||
+ | </ | ||
+ | という上記の解説を丸写ししてみましたが、実際、上記のコードを、どのようにmapGettersとmapActionsを使って変更したらよいのかは、残念ながらわかりませんでした。。。(爆) | ||
行 349: | 行 404: | ||
===== リンク ===== | ===== リンク ===== | ||
- | 目次: | + | 目次:[[: |
- | 前: | + | 前:[[13.vue.jsとfirebaseで認証つきボイスレコーダー: |
- | 次: | + | 次:[[15.vue.jsのvuexでカウンター: |
14.vue.jsのvuexで入力フォーム/index.html.1548394020.txt.gz · 最終更新: 2019/01/25 by adash333