====== 14.vue.jsのvuexで入力フォーム ====== Vue.jsでは、『困難は分割せよ』という名言に従い、webページをコンポーネントという部品に分けて記載することにより、見通しのよいプログラミングを行っています。しかし、各コンポーネントで共通のデータをやり取りしたい場合は、データのバケツリレーのようになってしまい大混乱となります。そのため、データは、storeストアという一カ所に集めて、各コンポーネント←→ストアで、データのやり取りをする仕組みを提供するのがVuexというものです。似たようなものに、ReactというjavascriptフレームワークのReduxがありますが、筆者には難しすぎて挫折しました。また、Angular（Ionic）というjavascriptフレームワークのproviderというものがありますが、こちらは、ソースコードを見るだけでなんとなく分かった気にはなれます。当初、[[https://luftgarden.work/tut-nuxt-dog-part1/|Nuxt.js で簡単な画像一覧アプリを作成する]]を写経して、画像一覧アプリを作成しようとしたのですが、vuexの部分がよく分からず、しかも実際に動くアプリを作成することができませんでした。Vue.jsアプリを作成していく上で、vuexは避けて通れない難関だと認識しました。そのため、非常に簡単なサンプルコードの写経から、順番にやってみたいと思います。また、Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。　　 ===== 初めてのVuex目次 ===== [[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]] [[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]] [[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]] [[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]] [[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]] [[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]] ===== すること ===== -vuexを用いて入力フォームを作成する今回は、https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1を写経させていてだきました。上記サイトにも、[[https://amzn.to/2sE8zW4|基礎から学ぶ Vue.js]] という本が元ネタですと記載してありますが、この本はVue.js初めての方に(javascriptフレームワーク初めての方にも)非常にお勧めです。ソースコード https://codesandbox.io/s/0409x6y00l Demo https://0409x6y00l.codesandbox.io/ ===== 開発環境 =====


Chrome
Codesandbox

Vue 2.5.2
Vuetify 1.4.2
Vuex 3.1.0

===== CodeSandboxで新規Vue.jsアプリを作成 ===== 最初に、CodeSandbox上で、新規Vue.jsアプリを作成し、CSSフレームワークVuetifyが利用できるように設定します。 -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック -Vue　をクリック -Add Dependencyから、Vuetifyをインストール -index.htmlの編集 -src/main.jsの編集 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123704.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123723.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123749.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123804.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123835.png}} index.htmlと、src/main.jsは、以下をコピペします。 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124228.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124252.png}} 以上で、Vue.jsで、Vuetifyを利用する準備ができました。 ===== Vuetifyのテンプレートを適用 ===== src/App.vueに、以下のコードをコピペします。 {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124906.png}} これで、App.vueの土台が出来上がりました。 ===== Vue.jsにVuexをインストール ===== 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行を追加します。（追加する位置には注意する必要があります。）


import store from './store'

store,

（変更前） {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142758.png}} （変更後） {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142928.png}} この時点では、store.jsを作成していないので、エラーが出ます。 *src/store.jsのテンプレートの作成 src/store.jsを新規作成し、以下をコピペします。


import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},

  getters: {},

  mutations: {},

  actions: {}
});

export default store;

これでも、まだエラーが出ています。。。 {{: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を少しだけ改変した以下のコードに変更します。

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-145415.png}} {{:14.vue.jsのvuexで入力フォーム:pasted:20190121-145438.png}} 下のフォームに文字を記入すると、上に反映されています。うまくいっているようです。 ===== src/components/EditForm.vueの編集 ===== 見栄えを改善するために、src/components/EditForm.vueを少しだけ変更したいと思います。 //

Kangaroo Valley Safari