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

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

ユーザ用ツール

サイト用ツール


15.vue.jsのvuexでカウンター:index.html


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
15.vue.jsのvuexでカウンター:index.html [2019/01/26] – [mapGetters, mapActionsを用いてVuexのコードを少し発展させる] adash33315.vue.jsのvuexでカウンター:index.html [2019/02/23] (現在) – [15.Vue.jsのvuexでカウンター] adash333
行 1: 行 1:
 ====== 15.Vue.jsのvuexでカウンター ====== ====== 15.Vue.jsのvuexでカウンター ======
  
-vuexをなんとかして理解するために簡単なアプリを写経しています。前回の[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]では、文字を入力すると、そのまま別のコンポーネントで表示するアプリを、vuexを用いて作成しました。+vuexをなんとかして理解するために簡単なアプリを写経しています。前回の<wrap hi>[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]</wrap>では、文字を入力すると、そのまま別のコンポーネントで表示するアプリを、vuexを用いて作成しました。
  
 今回は、『カウンターアプリ』を作成しながら、vuexの理解を深めたいと思います。 今回は、『カウンターアプリ』を作成しながら、vuexの理解を深めたいと思います。
行 25: 行 25:
  
 ソースコード ソースコード
 +https://github.com/adash333/Vue_Vuex_Counter
 https://codesandbox.io/s/l556xq6327 https://codesandbox.io/s/l556xq6327
  
 Demo Demo
 +https://l556xq6327.codesandbox.io/ 
 +{{:15.vue.jsのvuexでカウンター:pasted:20190126-204253.png}}
 ===== 開発環境 ===== ===== 開発環境 =====
  
行 299: 行 301:
 {{:15.vue.jsのvuexでカウンター:pasted:20190126-055347.png}} {{:15.vue.jsのvuexでカウンター:pasted:20190126-055347.png}}
  
-このように、カウンターの初期値や、+1、-1の状態管理をvuexに移動しても、ちゃんと、カウンターが動くことが確認でき+カウンターの初期値や、+1、-1の状態管理をvuexに移動しても、ちゃんと、カウンターが動くことが確認できました
  
 {{:15.vue.jsのvuexでカウンター:pasted:20190126-055912.png}} {{:15.vue.jsのvuexでカウンター:pasted:20190126-055912.png}}
 +
 +ここまでのソースコード(CodeSandeboxバージョン)
 +
 +{{ :15.vue.jsのvuexでカウンター:vue-vuex-counter.zip |}}
  
 ===== mapGetters, mapActionsを用いてVuexのコードを少し発展させる ===== ===== mapGetters, mapActionsを用いてVuexのコードを少し発展させる =====
行 369: 行 375:
 </code> </code>
  
 +(変更前)
 +{{:15.vue.jsのvuexでカウンター:pasted:20190126-202927.png}}
 +
 +(変更後)
 +{{:15.vue.jsのvuexでカウンター:pasted:20190126-203626.png}}
  
 +今回のアプリ作成はここまでとなります。
  
  
行 403: 行 415:
  
 DEMO DEMO
 +https://l556xq6327.codesandbox.io/
  
  


15.vue.jsのvuexでカウンター/index.html.1548501431.txt.gz · 最終更新: 2019/01/26 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki