14.vue.jsのvuexで入力フォーム:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
14.vue.jsのvuexで入力フォーム:index.html [2019/01/21] – [Vue.jsにVuexをインストール] adash333 | 14.vue.jsのvuexで入力フォーム:index.html [2019/01/26] – [14.vue.jsの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でパスワード制限: | ||
行 28: | 行 33: | ||
今回は、https:// | 今回は、https:// | ||
- | という本が元ネタですと記載してありますが、この本はVue.js初めての方(javascriptフレームワーク初めての方にも)非常にお勧めです。 | + | という本が元ネタですと記載してありますが、この本はVue.js初めての方に(javascriptフレームワーク初めての方にも)非常にお勧めです。 |
ソースコード | ソースコード | ||
+ | https:// | ||
Demo | Demo | ||
+ | https:// | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 153: | 行 158: | ||
気づいたら、なぜか、エラーが消えていました。 | 気づいたら、なぜか、エラーが消えていました。 | ||
- | ===== src/ | + | ===== src/components/ |
- | 文字入力を行うコンポーネントとして、src/ | + | 文字入力を行うコンポーネントとして、src/components/ |
- | {{: | + | {{: |
+ | ===== src/ | ||
+ | EditForm.vue で文字を入力 → store.js に入力した文字を保持 → App.vueで文字を表示 | ||
+ | |||
+ | といった感じにしたいと思います。すると、以下のようなコードになるらしいです。 | ||
+ | |||
+ | 最初は宇宙語ですが、『computedでstoreのゲッターを呼んで値を取得する』らしいです。 | ||
+ | |||
+ | とりあえず、src/ | ||
+ | < | ||
+ | < | ||
+ | <div id=" | ||
+ | <v-app id=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <v-flex xs12 sm6 offset-sm3> | ||
+ | < | ||
+ | <v-img | ||
+ | src=" | ||
+ | aspect-ratio=" | ||
+ | ></ | ||
+ | |||
+ | < | ||
+ | <div> | ||
+ | <h3 class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import EditForm from " | ||
+ | |||
+ | export default { | ||
+ | components: { EditForm }, | ||
+ | data() { | ||
+ | return {}; | ||
+ | }, | ||
+ | // | ||
+ | computed: { | ||
+ | // | ||
+ | // | ||
+ | message() { | ||
+ | return this.$store.getters.message; | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 下のフォームに文字を記入すると、上に反映されています。うまくいっているようです。 | ||
+ | |||
+ | ===== src/ | ||
+ | |||
+ | 見栄えを改善するために、src/ | ||
+ | |||
+ | <input type=" | ||
+ | |||
+ | v-text-field のときは、data() にデータを入れていた。今回は、vuexのstoreにデータを送るので、computedを用いている。。。 | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | 参考:https:// | ||
+ | |||
+ | ===== stateやgetterにv-modelを使用する ===== | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | *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(' | ||
+ | </ | ||
+ | |||
+ | という上記の解説を丸写ししてみましたが、実際、上記のコードを、どのようにmapGettersとmapActionsを使って変更したらよいのかは、残念ながらわかりませんでした。。。(爆) | ||
行 201: | 行 372: | ||
Vue.jsとVuexでTodoListを作ってみた | Vue.jsとVuexでTodoListを作ってみた | ||
→ToDoアプリ(create, | →ToDoアプリ(create, | ||
+ | |||
+ | ===== mapStateとスプレッド演算子『...』に関するリンク ===== | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | @Statham | ||
+ | 2018年12月23日に更新 | ||
+ | Vuex: mapStateの使い方を理解する | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 206: | 行 395: | ||
===== リンク ===== | ===== リンク ===== | ||
- | 目次: | + | 目次:[[: |
- | 前: | + | 前:[[13.vue.jsとfirebaseで認証つきボイスレコーダー: |
- | 次: | + | 次:[[15.vue.jsのvuexでカウンター: |
14.vue.jsのvuexで入力フォーム/index.html.txt · 最終更新: 2019/02/09 by adash333