サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » 14.vue.jsのvuexで入力フォーム
トレース:
14.vue.jsのvuexで入力フォーム:index.html


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
次のリビジョン両方とも次のリビジョン
14.vue.jsのvuexで入力フォーム:index.html [2019/01/21] – [開発環境] adash33314.vue.jsのvuexで入力フォーム:index.html [2019/01/25] – [componentとstoreをバインドするヘルパー] adash333
行 28: 行 28:
  
 今回は、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1を写経させていてだきました。上記サイトにも、[[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]] 今回は、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1を写経させていてだきました。上記サイトにも、[[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]]
-という本が元ネタですと記載してありますが、この本はVue.js初めての方(javascriptフレームワーク初めての方にも)非常にお勧めです。+という本が元ネタですと記載してありますが、この本はVue.js初めての方に(javascriptフレームワーク初めての方にも)非常にお勧めです。
  
  
行 95: 行 95:
  
   -Add Dependencyから、Vuexをインストール   -Add Dependencyから、Vuexをインストール
 +  -Add Dependencyから、babel-polyfillをインストール
 +  -src/main.jsの編集
 +  -src/store.jsの新規作成
  
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141702.png}}
  
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141741.png}}
  
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141941.png}}
  
 +src/main.jsは、以下の2行を追加します。（追加する位置には注意する必要があります。）
  
 +<code>
 +import store from './store'
  
-{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141702.png}}+store, 
 +</code> 
 + 
 +（変更前） 
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142758.png}} 
 + 
 +（変更後） 
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142928.png}} 
 + 
 +この時点では、store.jsを作成していないので、エラーが出ます。 
 + 
 +  *src/store.jsのテンプレートの作成 
 +src/store.jsを新規作成し、以下をコピペします。 
 +<code> 
 +import Vue from "vue"; 
 +import Vuex from "vuex"; 
 + 
 +Vue.use(Vuex); 
 + 
 +const store = new Vuex.Store({ 
 +  state: {}, 
 + 
 +  getters: {}, 
 + 
 +  mutations: {}, 
 + 
 +  actions: {} 
 +}); 
 + 
 +export default store; 
 +</code> 
 + 
 +これでも、まだエラーが出ています。。。 
 + 
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-143709.png}} 
 + 
 +===== src/store.jsの編集 ===== 
 +今回の、フォーム入力に関する状態管理のコードを記載します。https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1#storejsをコピペします。 
 + 
 +{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-144151.png}} 
 + 
 +気づいたら、なぜか、エラーが消えていました。 
 + 
 +===== src/components/EditForm.vueの作成 ===== 
 + 
 +文字入力を行うコンポーネントとして、src/components/EditForm.vueを新規作成して、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1#editformvueのコードを写経します。 
 + 
 +{{: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を使って変更したらよいのかは、残念ながらわかりませんでした。。。（爆）
  
-{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141741.png}} 
  
  
行 143: 行 374:
 Vue.jsとVuexでTodoListを作ってみた Vue.jsとVuexでTodoListを作ってみた
 →ToDoアプリ（create, updateのみ）をindex.htmlの1ファイルのみで作成します。https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42cに、コンポーネント化したコードが解説されています。 →ToDoアプリ（create, updateのみ）をindex.htmlの1ファイルのみで作成します。https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42cに、コンポーネント化したコードが解説されています。
 +
 +===== mapStateとスプレッド演算子『...』に関するリンク =====
 +
 +
 +
 +
 +
 +https://qiita.com/Statham/items/046649bff81c00ba275e
 +@Statham
 +2018年12月23日に更新
 +Vuex: mapStateの使い方を理解する
 +
 +
 +
 +
 +
 +
 +
  
  


14.vue.jsのvuexで入力フォーム/index.html.txt · 最終更新: 2019/02/09 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki