Vuexの基礎基礎自分用メモ - のぐそんブログ

Vuexを使うためのメモ。
部分的にしか書いてないので、あまり参考にならないと思います。

Vuexをインストール

npm install vuex

store

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

Vue.use(Vuex)

export default new Vuex.Store({
  //アプリケーションのステート
  state: {
  },
  //ステートを更新する
  mutations: {
  },
  //非同期処理や、APIとのやり取りを行う
  actions: {
  }
  //ステートの一部や、ステートから計算された値を返す
  getters: {
  }
})

Vuexのデータの流れ

Kobito.8obzGr.png

mutations

ステートを更新するために使います。
Vuexのルールとしてステートを更新はミューテーションが行います。

store

storeにミューテーションを登録。ミューテーションはタイプ:ハンドラで設定する。

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => {
      state.count++;
    }
  }
})

component

コンポーネントからミューテーションを直接呼び出すことはできません。
ミューテーションをを呼ぶ場合は、store.commit(ミューテーションのタイプ)を利用する。

<template>
  <div>
    {{count}}
  </div>
</template>

<script>
export default {
  created: function() {
     this.$store.commit("increment") // this.$store.state.count :1 
     this.count = this.$store.state.count
  }
};
</script>

commitの第2引数

commitの第2引数を設定すると、ミューテーションの第2引数に値(paylodaと呼ぶらしい)を渡すことができます。

store

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state ,payload) => {
      state.count = payload.amount;
    }
  }
})

component

<template>
  <div>
    {{count}}
  </div>
</template>

<script>
export default {
  created: function() {
     this.$store.commit("increment",{amount:10}) // this.$store.state.count :10
     this.count = this.$store.state.count
  }
};
</script>

actions

アクションは非同期処理や、APIとの通信処理を行なった後、ミューテーションを呼ぶために利用します。アクションはstore.dispatch(アクション名)で呼び出します。

store

storeにアクションを登録。 actionの第1引数には以下の要素が含まれます。

state・・・定義済みのステート
getters・・・定義済みのゲッター
dispatch・・・他のアクションを実行する
commint ・・・ミューテーションを実行する

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state) => {
      state.count ++;
    }
  },
  actions:{
    incrementAction:(ctx) => {
      ctx.commit('increment');
    }
  }
})

component

<template>
  <div>
    {{count}}
  </div>
</template>

<script>
export default {
  created: function() {
     this.$store.dispatch("incrementAction") // this.$store.state.count :1 
     this.count = this.$store.state.count
  }
};
</script>

actions内で非同期処理をしてviewに反映する

例1)算出プロパティを利用する

store

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state) => {
      state.count ++;
    }
  },
  actions:{
    incrementActionAsync:(ctx) => { 
      setTimeout(function(){
        ctx.commit('increment');
    },3000)
    }
  }
})

component

<script>
import { mapState } from 'vuex'

export default {
  created: function() {
    const self = this;
     this.$store.dispatch("incrementActionAsync")
  },
  computed:mapState({
    count:state => state.count
  })
  //mapStateを利用しない場合
  // computed:{
  //   count(){
  //     return this.$store.state.count
  //   }
  // }
};
</script>

例2)Promiseを利用する

store

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state) => {
      state.count++;
    }
  },
  actions: {
    incrementActionAsync: (ctx) => {
      return new Promise((resolve, reject) => {
        setTimeout(function () {
          ctx.commit('increment');
          resolve();
        }, 3000)
      });
    }
  }
})

component

<template>
  <div>
    {{count}}
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data:function(){
    return {
      count:0
    }
  },
  created: function() {
    const self = this;
     this.$store.dispatch("incrementActionAsync").then(() =>{
       this.count = this.$store.state.count
     })
  }
};
</script>

getters

gettersはステートの値から別の値を算出する為に利用します。

store

storeにゲッターを登録。

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => {
      state.count++;
    }
  },
  getters: {
    gCount:state => state.count * 2
  }
})

component

コンポーネントからゲッターを実行。

<template>
  <div>
    {{count}} 
  </div>
</template>

<script>
export default {
  created: function() {
     this.$store.commit("increment") // this.$store.state.count :1 
     this.count = this.$store.getters.gCount // 2
  }
};
</script>

ゲッターから、他のゲッターも利用することができる。

  getters: {
    gCount:state => state.count * 2,
    gCount2:(state , getters) => getters.gCount *10　//20
  }

まとめ

基本的にはステートは、算出プロパティ(computed)でviewに反映する。
ステートの値に対して何かしらのロジック通してから表示する場合は、gettersを利用する。非同期処理を使う場合はactionsを利用する。