差分

このページの2つのバージョン間の差分を表示します。

--- 14.vue.jsのvuexで入力フォーム:index.html [2019/01/21] – [Vue.jsにVuexをインストール] adash333
+++ 14.vue.jsのvuexで入力フォーム:index.html [2019/01/25] – [14.vue.jsのvuexで入力フォーム] adash333
@@ 行 5: / 行 5: @@
 似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular（Ionic）というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。
-当初、[[https://luftgarden.work/tut-nuxt-dog-part1/|Nuxt.js で簡単な画像一覧アプリを作成する]]を写経して、画像一覧アプリを作成しようとしたのですが、vuexの部分がよく分からず、しかも実際に動くアプリを作成することができませんでした。Vue.jsアプリを作成していく上で、vuexは避けて通れない難関だと認識しておりますので、非常に簡単なサンプルコードの写経から、順番にやってみたいと思います。
+当初、[[https://luftgarden.work/tut-nuxt-dog-part1/|Nuxt.js で簡単な画像一覧アプリを作成する]]を写経して、画像一覧アプリを作成しようとしたのですが、vuexの部分がよく分からず、しかも実際に動くアプリを作成することができませんでした。Vue.jsアプリを作成していく上で、vuexは避けて通れない難関だと認識しました。そのため、非常に簡単なサンプルコードの写経から、順番にやってみたいと思います。
 また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。
@@ 行 28: / 行 28: @@
 今回は、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1を写経させていてだきました。上記サイトにも、[[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]]
-という本が元ネタですと記載してありますが、この本はVue.js初めての方(javascriptフレームワーク初めての方にも)非常にお勧めです。
+という本が元ネタですと記載してありますが、この本はVue.js初めての方に(javascriptフレームワーク初めての方にも)非常にお勧めです。
 ソースコード
+https://codesandbox.io/s/0409x6y00l
 Demo
+https://0409x6y00l.codesandbox.io/
 ===== 開発環境 =====
@@ 行 153: / 行 153: @@
 気づいたら、なぜか、エラーが消えていました。
-===== src/EditForm.vueの作成 =====
+===== src/components/EditForm.vueの作成 =====
-文字入力を行うコンポーネントとして、src/EditForm.vueを新規作成して、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1#editformvueのコードを写経します。
+文字入力を行うコンポーネントとして、src/components/EditForm.vueを新規作成して、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1#editformvueのコードを写経します。
-{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-144542.png}}
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-144937.png}}
+===== src/App.vueの編集 =====
+EditForm.vue で文字を入力　→ store.js　に入力した文字を保持　→　App.vueで文字を表示
+といった感じにしたいと思います。すると、以下のようなコードになるらしいです。
+最初は宇宙語ですが、『computedでstoreのゲッターを呼んで値を取得する』らしいです。
+とりあえず、src/App.vueを、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1#appvueを少しだけ改変した以下のコードに変更します。
+<code>
+<template>
+  <div id="app">
+    <v-app id="inspire">
+      <v-toolbar color="indigo" dark fixed app>
+        <v-toolbar-title>Vue Vuex Form</v-toolbar-title>
+      </v-toolbar>
+      <v-content>
+        <v-container fluid fill-height>
+          <v-flex xs12 sm6 offset-sm3>
+            <v-card>
+              <v-img
+                src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
+                aspect-ratio="2.75"
+              ></v-img>
+              <v-card-title primary-title>
+                <div>
+                  <h3 class="headline mb-0">Kangaroo Valley Safari</h3>
+                  <div>{{ message }}</div>
+                </div>
+              </v-card-title>
+              <EditForm></EditForm>
+            </v-card>
+          </v-flex>
+        </v-container>
+      </v-content>
+    </v-app>
+  </div>
+</template>
+<script>
+import EditForm from "./components/EditForm";
+export default {
+  components: { EditForm },
+  data() {
+    return {};
+  },
+  //vuexのstoreは基本的にcomputedと使う
+  computed: {
+    //main.jsでローカルにstoreを登録してるので、$storeが使える
+    //ここではgettersに登録したmessageゲッターを使ってstoreのstateのmessageを取得している
+    message() {
+      return this.$store.getters.message;
+    }
+  }
+};
+</script>
+</code>
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-145415.png}}
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-145438.png}}
+下のフォームに文字を記入すると、上に反映されています。うまくいっているようです。
+===== src/components/EditForm.vueの編集 =====
+見栄えを改善するために、src/components/EditForm.vueを少しだけ変更したいと思います。
+<input type="text" のところを、vuetifyを使おうとして、 <v-text-field  にすると、うまくいかない。。。
+v-text-field のときは、data() にデータを入れていた。今回は、vuexのstoreにデータを送るので、computedを用いている。。。
+[[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]]のp268の通りにやればできそうですが、、、
+作成中。。。
+途中のコード
+https://codesandbox.io/s/z2zw54kmqx
+参考：https://vuetifyjs.com/ja/components/forms
+===== stateやgetterにv-modelを使用する =====
+[[https://amzn.to/2CJPlCR|基礎から学ぶ Vue.js]]のp268を写経してみます。
+  *stateはmutation以外からは書き換えていけない。
+  *getterもセッター機能がついていないため、入力はできない。
+  *v-modelを使用すると、自動的に値を書き換えようとするため、エラーになってしまう
+→算出プロパティ（computed）のセッターを用いると、うまくいくらしいです。
+<code>
+// <template>の中の一部
+<v-text-field v-model="message" label="以下に入力" required></v-text-field>
+// <script>の中の一部
+    message: {
+      get() {
+        return this.$store.getters.message;
+      },
+      set(value) {
+        this.$store.dispatch("doUpdate", value);
+      }
+    }
+</code>
+src/components/EditForm.vue
+（変更前）
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190125-050402.png}}
+（変更後）
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190125-052126.png}}
+src/App.vue （変更後）
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190125-052233.png}}
+うまくいっているようです。
+===== componentとstoreをバインドするヘルパー =====
+getterやmutationを複数使用するとき、算出プロパティcomputedやmethodsにすべてを記述するのは冗長となってしまいます。
+そのため、ヘルパーというものが用意されているそうです。
+<code>
+import {
+  mapState,
+  mapGetters,
+  mapMutations,
+  mapActions
+} from 'vuex'
+</code>
+stateとgetterは算出プロパティcomputedに登録します。
+mutationとactionはメソッドmethodsに登録します。
+<code>
+computed: {
+  // ローカルの算出プロパティ
+  myProperty() { ... },
+  ...mapGetters([
+    // this.messageをstore.getters.messageにマッピング
+    'message'
+  ]),
+  // メソッド名を変更したい場合はオブジェクトで定義
+  ...mapGetters({
+    // this.messageAliasをstore.getters.messageにマッピング
+    messageAlias: 'message'
+  })
+}
+</code>
+カッコが、[]なのか、{}なのか、紛らわしいです。[]は配列、{}はオブジェクトなのだと思います。
+組み合わせる必要がなければ、以下のように、オプションに直接、登録することもできるとのことです。
+(しかし、これは汎用的ではないと思われます。)
+<code>
+computed: mapGetters(['message']),
+methods: mapActions(['add', 'update', 'remove'])
+</code>
+これは、次のメソッドでdispatchを使用できるようになるとのことです。
+<code>
+this.add('newItem!')
+// これは次のdispatchを使用したときと同じ
+this.$store.dispatch('add', 'newItem!')
+</code>
+という上記の解説を丸写ししてみましたが、実際、上記のコードを、どのようにmapGettersとmapActionsを使って変更したらよいのかは、残念ながらわかりませんでした。。。（爆）
@@ 行 201: / 行 374: @@
 Vue.jsとVuexでTodoListを作ってみた
 →ToDoアプリ（create, updateのみ）をindex.htmlの1ファイルのみで作成します。https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42cに、コンポーネント化したコードが解説されています。
+===== mapStateとスプレッド演算子『...』に関するリンク =====
+https://qiita.com/Statham/items/046649bff81c00ba275e
+@Statham
+年12月23日に更新
+Vuex: mapStateの使い方を理解する