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

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

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
15.vue.jsのvuexでカウンター:index.html [2019/01/26]
adash333 [CounterコンポーネントからVuexの利用]
15.vue.jsのvuexでカウンター:index.html [2019/02/23] (現在)
adash333 [15.Vue.jsのvuexでカウンター]
行 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の理解を深めたいと思います。
行 23: 行 23:
  
 今回は、https://qiita.com/ferretdayo/items/edcd2b6682148e477104を写経させていてだきました。 今回は、https://qiita.com/ferretdayo/items/edcd2b6682148e477104を写経させていてだきました。
- 
- 
- 
- 
  
 ソースコード ソースコード
- +https://github.com/adash333/Vue_Vuex_Counter 
- +https://codesandbox.io/s/l556xq6327
  
 Demo Demo
 +https://l556xq6327.codesandbox.io/ 
 +{{:15.vue.jsのvuexでカウンター:pasted:20190126-204253.png}}
 ===== 開発環境 ===== ===== 開発環境 =====
  
行 298: 行 294:
   },   },
 </code> </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}}
 +
 +今回のアプリ作成はここまでとなります。
 +
  
  
行 327: 行 412:
 ===== ソースコード ===== ===== ソースコード =====
 ソースコード ソースコード
- +https://codesandbox.io/s/l556xq6327
  
 DEMO DEMO
 +https://l556xq6327.codesandbox.io/
  
  


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