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/25] – [リンク] adash333 | ||
---|---|---|---|
行 5: | 行 5: | ||
似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular(Ionic)というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 | 似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular(Ionic)というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。 | ||
- | 当初、[[https:// | + | 当初、[[https:// |
また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。 | また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。 | ||
行 28: | 行 28: | ||
今回は、https:// | 今回は、https:// | ||
- | という本が元ネタですと記載してありますが、この本はVue.js初めての方(javascriptフレームワーク初めての方にも)非常にお勧めです。 | + | という本が元ネタですと記載してありますが、この本はVue.js初めての方に(javascriptフレームワーク初めての方にも)非常にお勧めです。 |
ソースコード | ソースコード | ||
+ | https:// | ||
Demo | Demo | ||
+ | https:// | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 97: | 行 97: | ||
-Add Dependencyから、babel-polyfillをインストール | -Add Dependencyから、babel-polyfillをインストール | ||
-src/ | -src/ | ||
+ | -src/ | ||
{{: | {{: | ||
行 145: | 行 146: | ||
{{: | {{: | ||
+ | ===== src/ | ||
+ | 今回の、フォーム入力に関する状態管理のコードを記載します。https:// | ||
+ | {{: | ||
+ | 気づいたら、なぜか、エラーが消えていました。 | ||
+ | |||
+ | ===== src/ | ||
+ | |||
+ | 文字入力を行うコンポーネントとして、src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ===== 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を使って変更したらよいのかは、残念ながらわかりませんでした。。。(爆) | ||
行 187: | 行 367: | ||
Vue.jsとVuexでTodoListを作ってみた | Vue.jsとVuexでTodoListを作ってみた | ||
→ToDoアプリ(create, | →ToDoアプリ(create, | ||
+ | |||
+ | ===== mapStateとスプレッド演算子『...』に関するリンク ===== | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | @Statham | ||
+ | 2018年12月23日に更新 | ||
+ | Vuex: mapStateの使い方を理解する | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 192: | 行 390: | ||
===== リンク ===== | ===== リンク ===== | ||
- | 目次: | + | 目次:[[: |
- | 前: | + | 前:[[13.vue.jsとfirebaseで認証つきボイスレコーダー: |
- | 次: | + | 次:[[15.vue.jsのvuexでカウンター: |
14.vue.jsのvuexで入力フォーム/index.html.txt · 最終更新: 2019/02/09 by adash333