vuexが分かりにくいのでまとめ

vuexの分かりにくいと思ったところだけピックアップしてメモしました。

store

storeが親みたいなもので、state、getters、mutations、actionsプロパティから構成されている。

state

データはstateが保持するようになっている。

stateのデータは、mutationsだけが変更の操作をすることができる。

→データの変更の操作は、commitメソッドによって行う。

getters

vueのcomputedのように使う。gettersの引数にstateを渡してstateの値でログイン状態を判定するなど。

actions

mutationsとほぼ同じ。actions→mutationsみたいな流れ。

mutationsはstateの変更だけを行う。

actionsとmutationsで似ているが、役割を細分化した感じ。

actionsはbackendAPIというサーバー側ともやりとりも行う。

vueのcomponentからstoreの各プロパティにアクセスする方法

vue側からstoreのプロパティに

this.$store.state

this.$store.mutations

のようにアクセスできる。

ログイン情報など、複数のcomponentで共有したいデータをstateに持たせる。

vuexを使う目的

もしいっぱいcomponentがある中で、ひとつのcomponentでログインを行ったら、componentはデフォルトで依存性が無い仕組みになっているので、他のcomponentにはログインしている状態が引き継がれていない。

ログインしている状態が他のcomponentで共有されていなかったら、アプリとして使いものにならないので、stateをcomponent間で共有するためにvuexを使う。

各componentからそれぞれstateの情報を取得するようになっていて、stateのデータが全てのcomponentで共有されるようになっている。

複数あるcomponentの中のひとつのcomponentからstateを書き換える場合、mutationでcomponent側からstateを書き換えして、stateが書き換わる。

→各componentが書き換わったstateのデータを取得することで、ひとつのcomponentから書き換えたstateのデータが各componentで共有される。

mutation

mutationに定義したメソッドを例えばfooとすると、

// store/index.jsファイル

mutations: {
   foo (state, payload) {
     // ...
   }
 }

component側でthis.$store.mutations.foo()で呼び出せる。

this.$store.mutationsを省略できるのが、mapMutations()。

componentでmapMutations()ヘルパーをimportし、

mapMutations([ 'foo' ])

と書くことで、fooメソッドをcomponent内でも使える。

実際の使用例：

vueのcomponentファイル内のmethodとしてmapMutationsを使う場合

// vueのcomponentファイル (○○.vue)

import {mapMutations} from 'vuex'

 methods: {
   ...mapMutations([
     'foo'
   ])
 }

他にもcomponentファイルのローカルのmethodがあるときはspread operator「 ... 」を使って書く。

methodsの{}の中はオブジェクトなので、foo:bar形式でなければならないので、マージする目的でspread operatorを使う感じ。

// ローカルのオブジェクトがあるときのspread operatorの使用例

computed : {
   foo : function(){
     // 
   },
   ...mapState(['bar']) 
 }

mapState、mapMutationsなどこれらのヘルパーはオブジェクトをリターンする。

computed : {
    object a, // ローカルのオブジェクト

    object b // importしたオブジェクト
    
}

大きくとらえると、computedの中には

object a　

object b

の二つのオブジェクトがある。

object a は foo : bar形式

object b はmapState(['bar'])という形式。

computed : { foo:bar, mapState([hoge]) }

spread operatorを使わずに上記のようにすると、オブジェクトの表示形式が違うことになり、computedを構成するオブジェクトとしてうまく登録できない。

そこで、...mapState()とすると、

computed : { foo:bar, ...mapState([hoge]) }

mapState([hoge])にvuexのstateで定義したfoo : bar形式のオブジェクトを入れ込んでくれるので、computedのオブジェクトとして正常に登録できる。

上記のコード例のように登録すると、vuexのstate側で定義したhogeメソッドをvueのcomponentでthis.hogeのように使うことができる。

下記の公式サイトのリンクも参照。

https://vuex.vuejs.org/guide/state.html

順次、コンテンツを追加していきます。