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/01/25] – [リンク] adash333 | ||
---|---|---|---|
行 5: | 行 5: | ||
似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular(Ionic)というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 | 似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular(Ionic)というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 | ||
- | 当初、[[https:// | + | 当初、[[https:// |
また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。 | また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。 | ||
行 32: | 行 32: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
Demo | Demo | ||
+ | https:// | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 237: | 行 237: | ||
[[https:// | [[https:// | ||
- | |||
- | 作成中。。。 | ||
- | |||
- | 途中のコード | ||
- | |||
- | https:// | ||
- | |||
参考:https:// | 参考:https:// | ||
行 289: | 行 282: | ||
そのため、ヘルパーというものが用意されているそうです。 | そのため、ヘルパーというものが用意されているそうです。 | ||
+ | < | ||
+ | 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を使って変更したらよいのかは、残念ながらわかりませんでした。。。(爆) | ||
行 358: | 行 390: | ||
===== リンク ===== | ===== リンク ===== | ||
- | 目次: | + | 目次:[[: |
- | 前: | + | 前:[[13.vue.jsとfirebaseで認証つきボイスレコーダー: |
- | 次: | + | 次:[[15.vue.jsのvuexでカウンター: |
14.vue.jsのvuexで入力フォーム/index.html.txt · 最終更新: 2019/02/09 by adash333