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

差分

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

この比較画面へのリンク

--- 15.vue.jsのvuexでカウンター:index.html [2019/01/26] – [mapGetters, mapActionsを用いてVuexのコードを少し発展させる] adash333
+++ 15.vue.jsのvuexでカウンター:index.html [2019/02/23] (現在) – [15.Vue.jsのvuexでカウンター] adash333
@@ 行 1: / 行 1: @@
 ====== 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の理解を深めたいと思います。
@@ 行 25: / 行 25: @@
 ソースコード
+https://github.com/adash333/Vue_Vuex_Counter
 https://codesandbox.io/s/l556xq6327
 Demo
+https://l556xq6327.codesandbox.io/
+{{:15.vue.jsのvuexでカウンター:pasted:20190126-204253.png}}
 ===== 開発環境 =====
@@ 行 299: / 行 301: @@
 {{:15.vue.jsのvuexでカウンター:pasted:20190126-055347.png}}
-このように、カウンターの初期値や、+1、-1の状態管理をvuexに移動しても、ちゃんと、カウンターが動くことが確認できる。
+カウンターの初期値や、+1、-1の状態管理をvuexに移動しても、ちゃんと、カウンターが動くことが確認できました。
 {{:15.vue.jsのvuexでカウンター:pasted:20190126-055912.png}}
+ここまでのソースコード（CodeSandeboxバージョン）
+{{ :15.vue.jsのvuexでカウンター:vue-vuex-counter.zip |}}
 ===== mapGetters, mapActionsを用いてVuexのコードを少し発展させる =====
@@ 行 347: / 行 353: @@
 上記のカウンターアプリを、mapGetters, mapActionsを用いて書き換えると、以下のようになります。
+<code>
+import {
+  mapGetters,
+  mapActions
+} from 'vuex'
+export default {
+  name: 'Counter',
+  computed: {
+    count () {
+      return this.$store.getters.getCount
+    }
+  },
+  methods: {
+    ...mapActions([
+      'increment',
+      'decrement'
+    ])
+  }
+}
+</code>
+（変更前）
+{{:15.vue.jsのvuexでカウンター:pasted:20190126-202927.png}}
+（変更後）
+{{:15.vue.jsのvuexでカウンター:pasted:20190126-203626.png}}
-作成中
+今回のアプリ作成はここまでとなります。
@@ 行 382: / 行 415: @@
 DEMO
+https://l556xq6327.codesandbox.io/

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