差分

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

--- 15.vue.jsのvuexでカウンター:index.html [2019/01/26] – [src/store.jsファイルの編集] adash333
+++ 15.vue.jsのvuexでカウンター:index.html [2019/01/27] – [CounterコンポーネントからVuexの利用] adash333
@@ 行 23: / 行 23: @@
 今回は、https://qiita.com/ferretdayo/items/edcd2b6682148e477104を写経させていてだきました。
 ソースコード
+https://codesandbox.io/s/l556xq6327
 Demo
+https://l556xq6327.codesandbox.io/
+{{:15.vue.jsのvuexでカウンター:pasted:20190126-204253.png}}
 ===== 開発環境 =====
@@ 行 279: / 行 274: @@
 </code>
-==== src/main.jsにstoreを登録 ====
+==== CounterコンポーネントからVuexの利用 ====
+src/main.jsで追記したstoreを利用するにはthis.$storeから利用するとのことです。（参考：[[https://qiita.com/ferretdayo/items/edcd2b6682148e477104#counter%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%8B%E3%82%89vuex%E3%81%AE%E5%88%A9%E7%94%A8|CounterコンポーネントからVuexの利用]]）
+上記サイトを写経しているだけで、詳しいことはよくわからないのですが、とにかく、$this.store.stateでstateをゲットしてくるらしいです。。。
+  *state    :stateにアクセスする際に利用
+  *dispatch :actionsで定義したメソッド名を引数に渡すことで，actionを実行できる
+  *getters  :ここからgettersで定義したメソッドを利用できる
+  *commit   :mutationsに定義したメソッド名を引数に渡すことで，mutationを実行できる
+今回のカウンターアプリでは、store.jsからのデータの取得にはcomputedで，storeのgettersで定義したcountの値を返すgetCountメソッドを利用します。
+<code>
+computed: {
+    count () {
+      return this.$store.getters.getCount
+    }
+  },
+</code>
+src/components/Counter.vue
+（変更前）
+{{:15.vue.jsのvuexでカウンター:pasted:20190126-055107.png}}
+（変更後）
+{{:15.vue.jsのvuexでカウンター:pasted:20190126-055347.png}}
+カウンターの初期値や、+1、-1の状態管理をvuexに移動しても、ちゃんと、カウンターが動くことが確認できました。
+{{:15.vue.jsのvuexでカウンター:pasted:20190126-055912.png}}
+ここまでのソースコード（CodeSandeboxバージョン）
+{{ :15.vue.jsのvuexでカウンター:vue-vuex-counter.zip |}}
+===== mapGetters, mapActionsを用いてVuexのコードを少し発展させる =====
+mapState, mapGetters, mapMutations, mapActionsといったヘルパーと、スプレッド演算子『...』を用いると、記載するコード量を減らすことができます。
+(いきなりこれを見ると、『わけわからん状態』ですが、上記の経過をたどった後であれば、何となく分かった気になれる気がします。)
+<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>
+上記のカウンターアプリを、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}}
+今回のアプリ作成はここまでとなります。
@@ 行 309: / 行 411: @@
 ===== ソースコード =====
 ソースコード
+https://codesandbox.io/s/l556xq6327
 DEMO
+https://l556xq6327.codesandbox.io/