Vuexを使ったカウンターアプリ


はじめに

ぷろぐらみんぐ初心者です。ここ最近、JavaScriptフレームワーク「Vue.js」にハマっています。今回は、Vue.jsに特化した状態管理ライブラリ「Vuex」の勉強がてらに「Vuex」を使ったカウンターアプリを作ってみました。
お手数おかけしますが指摘事項などありましたら、どんどん指摘おねがいします。

はじめに storeの読み込み(main.js)

import App from './App'
import Vue from 'vue'
import store from './store'


new Vue({
    el: '#app',
    components: { App },
    template: '<App/>',
    store
})


storeの作成(store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default
  new Vuex.Store({
   state: {
     count: 0
   },
   mutations: {
     increments(state) {
       state.count ++
     },
     decrements(state) {
       state.count --
     }
   }
 })

Vue.useを使いvuexをvueに登録します。
そして、処理を書いていきます。

'state'は、アプリケーション全体の状態を保持するオブジェクトなので、今回のアプリでは'count'を保持しています。

'mutations'は、stateにあるデータを更新する唯一の存在らしいです。なのでここにstateを更新する処理を書いています。

コンポーネントの作成

Counter.vue

<template>
   <div>
     <h3>counter アプリ</h3>
     {{count}}
     <button-counter  mode="increments">increments</button-counter>
     <button-counter  mode="decrements">decrements</button-counter>
   </div>
</template>
<script>
 import { mapState } from 'vuex'
 import ButtonCounter from './moduls/ButtonCounter'
   export default {
     computed: {
       ...mapState([
         'count'
       ])
     },
     components: {
         ButtonCounter
     }
   }
</script>

mapStateでコンポーネント内でstateが参照できるようになりました。
button-counterコンポーネントを作成していきす。

ButtonCounter.vue

<template>
   <div>
     <a href="#"  @click='mode'><slot></slot></a>
   </div>
</template>
<script>
 import { mapMutations } from 'vuex'
   export default {
       name: "ButtonCounter",
       props: {
         mode: String
       },
       methods: {
         ...mapMutations([
           'increments',
           'decrements'
         ])
       }
   }
</script> 

Counter.vueからmodeをButtonConter渡し、modeの内容によってインクリメントするかデクリメントするかを判定するようにしたつもりだったのですが、こんなエラーがでてうまくいきませんでした><

`Uncaught TypeError: fns.apply is not a function`

こんな関数ありません。的な感じで怒られてるんだと思います><

mapMutationsを使わずthis.$store.commitを使うことによって解決できました!

<template>
   <div>
     <a href="#"  @click='buttonTitle'><slot></slot></a>
   </div>
</template>
<script>
   export default {
       name: "ButtonCounter",
       props: {
         mode: String
       },
       methods: {
         buttonTitle(){
           this.$store.commit(this.mode)
         }
       }
   }
</script>

this.$store.commitの引数にCounterコンポーネントから受け取ったmodeを渡すことによって、store/index.jsのmutationsのincrementsかdecrementsを判定し機能します。

完成品。

最後に

アプリケーションの規模が大きくなるにつれて、共通の状態を保持するコンポーネントの数が増えていき、状態管理が困難になってくると思います。
こういった状態管理ライブラリを使うのは大切だと思いました。



この記事が気に入ったらサポートをしてみませんか?