Vuexに関する用語集 - subaru-hello’s blog

状態を管理してくれるらしい。状態って何。分からない。

いつも通り、アウトプットありきのインプットをしていこうと思う。

Installation | Vuex

Vuexとは

状態管理ライブラリ。データフローが単方向になるように設計されている。

大きなアプリケーション開発に使われることが多いらしい。

例えばログインの状態を全てのページで管理したい場合、このライブラリが使えるらしい。

各コンポーネントで定義していた算出メソッドやルーティング等をStoreという場所に集約している。

mapGettersやgettersを使うことで、コンポーネントの受け渡しをスムーズにしてくれている。

this.$store.getters.メソッド名

Store

Vuexの根幹部分。１アプリにつき最大１つ存在する。

new Vuex.Store({⇦ここ
	state{},
	getters{},
	mutations{},
	actions{},
})

この中に大きく４つのメソッドがある。

・state ・getter(値を返す）・mutation(stateを更新する) ・action(非同期処理や外部APIとのやりとりを行う

この４つそれぞれが働きあってコンポーネント間で値の状態管理がうまい具合に行われているとのこと。

下記のような流れで値の状態管理が行われいる。

①コンポーネント⇨②アクション⇨③ミューテーション⇨④ステート⇨⑤ゲッター①に戻る

コア機能

State

アプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します

使い方

// let's create a Counter component
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

store.state.countが変化するたびに、computedにあるpropertyがリアクティブに変化する、それに連動して、DOMが更新される。

rootディレクトリ(storeファイル)に下記コードを記述することで、子コンポーネントの変化を全てのコンポーネントに自動で反映させることができる。this.はself.と同じ感じ?

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

this.$storeを前につけることで、Storeにアクセスできる。

Getters

Storeに入っている算出プロパティやルーティングにアクセスできる中継地点。その名の通り、ゲッターとしての役割を持つ。

例えばこの算出プロパティを他のコンポーネントで使用したい時があるとする。

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

ここでgettersの登場。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

他のコンポーネントは、computedの中にthis.$store.getters.doneTodosを書き込むだけで、doneTodesを使用することができる。

mapGetters

...mapGettersを使うことで、$store.gettersを省略することができる。

this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用

実際の使い方。

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // ゲッターを、スプレッド演算子（object spread operator）を使って computed に組み込む
    ...mapGetters([
      'doneTodosCount',
			#本来はthis.$store.getters.doneTodosCountと書く必要がある。
      'anotherGetter',
      // ...
    ])
  }
}

Mutations

特徴

同期処理である必要がある。
stateを変更することができる。
直接呼び出すことができないので、store.commitにミューテーション名や引数（ペイロードと呼びます）を与えて呼び出すことでstateを更新することができる。

const store = new Vuex.Store({
  state: {
    count: 10
  },
  mutations: {
    increment (state) {
      // 状態を変更する
      state.count++
    }
  }
})

console.log(store.state.count)//→10
store.commit('increment')//incrementミューテーションを呼び出す
console.log(store.state.count)//→11

store.commitの第二引数に値を与えると渡される。(この値をペイロードと呼ぶ)

mutations:{
    increment(state,payload){
        state.count = state.count + payload.amount
     }
}
console.log(store.state.count)//→10
store.commit('increment',{amount:5})//
console.log(store.state.count)//　→15

Actions

下記の特徴を持ちます。

アクションは、状態を変更するのではなく、ミューテーションをコミットします。
アクションは任意の非同期処理を含むことができます。
非同期処理や外部APIとの通信を行い、最終的にミューテーションを呼び出すために使う

//アクションを定義
actions:{
    incrementAction(ctx){
//incrementミューテーションを実行する
        ctx.commit('increment')
     }
 }

ミューテーションと同様に直接呼び出すことはできない。

だから、store.dispatchにアクション名を与えて呼び出す。

#初期の値
console.log(store.state.count)// -> 10
#直接アクセスすることができないので、dispatchを使用する。
store.dispatch('incrementAction')//incrementActionを呼び出す
#もう一度呼び出してみる。
console.log(store.state.count)// ->11